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

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

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

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

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

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