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

Question

我得到一个像

的数组

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

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

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

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

Answer 1

您有 2 3 个主要问题：

1. 在这一行：

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

   User-Defined Components Must Be Capitalized。所以把它改成这样：

   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>
     );
   }