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