使用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

您有2 3个主要问题：

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