使用 React.Lazy (16.6.0) 的动态延迟加载

Question

>我得到一个像这样的数组

{Path:xxx, 
Component:"./xxx/ComPXX"}

从我的 API 并在此基础上创建我的应用程序的路由。目前我正在使用React-Loadable(5.5.0(和React-Router(4.4.0-betax以避免在严格模式下出现警告(。请参阅此处的工作示例。

由于 React 16.6 引入了 React.lazy，我正在尝试迁移我的解决方案，但是我遇到了错误和困难，但我尝试这样做。您可以在此处查看迁移(失败(的代码。

知道为什么这不起作用吗？可能是因为 React.Lazy 不接受变量吗？

Answer 1

你有23 个主要问题：

1. 在这一行中：

   var c = <dynamicLoader component={prop.component} />;
   

   用户定义的组件必须大写。 所以把它改成这样：

   var c = <DynamicLoader component={prop.component} />;
   

   显然，您还需要更改声明：

   function DynamicLoader(props) {
   return (
   <Suspense fallback={<div>Loading...</div>}>
   React.lazy(() => import(`${props.component}`))
   </Suspense>
   );
   }
   

2. 在这一行中

   return <Route exact path={prop.path} component={c} key={key} />;  
   

   正如道具component的名称所暗示的那样，您需要传递一个 组件而不是元素，您可以阅读有关差异的更多信息 在 DOCS 中。

   所以你需要把它改成这样：

   return <Route exact path={prop.path} component={() => c} key={key} />;
   

3. 你是对的。 我错过了孩子部分，您正在渲染一个字符串。 您可以创建一个 变量，并将其呈现为子项：

   function DynamicLoader(props) {
   const LazyComponent = React.lazy(() => import(`${props.component}`));
   return (
   <Suspense fallback={<div>Loading...</div>}>
   <LazyComponent/>
   </Suspense>
   );
   }