使用React.Lazy的动态延迟加载（16.6.0）
作者：凹凸曼00威威_694 | 2023-06-09 15:20
如何解决《使用React.Lazy的动态延迟加载（16.6.0）》经验，为你挑选了1个好方法。
我得到一个像
{Path:xxx,
Component:"./xxx/ComPXX"}
从我的API并基于此创建我的应用程序的路由。目前，我正在使用React-Loadable（5.5.0）和React-Router（4.4.0-betax，以避免在严格模式下发出警告）。在这里查看工作示例。
自从React 16.6引入React.lazy以来，我正在尝试迁移解决方案，但是我遇到了错误和困难，但是我尝试这样做。您可以在此处查看已迁移（失败）的代码。
知道为什么这不起作用吗？可能是因为React.Lazy不接受变量吗？
1> Sagiv b.g..：
您有2 3个主要问题：
在这一行：
var c = ;
用户定义的组件必须大写。因此将其更改为：
var c = ;
显然，您还需要更改声明：
function DynamicLoader(props) {
return (
Loading...
}>
React.lazy(() => import(`${props.component}`))
);
}
在这条线
return ;
就像道具的名称所component暗示的那样，您需要传递一个组件而不是一个元素，您可以阅读有关DOCS区别的更多信息。
因此，您需要将其更改为：
return c} key={key} />;
你是对的。我错过了孩子部分，您正在渲染字符串。您可以创建一个变量并将其呈现为子变量：
function DynamicLoader(props) {
const LazyComponent = React.lazy(() => import(`${props.component}`));
return (
Loading... 
京公网安备 11010802040832号 | 京ICP备19059560号-6