使用 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 个主要问题：

这一行：

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

这一行
```
return <Route exact path={prop.path} component={c} key={key} />;  
```
正如道具名称 component 所暗示的那样，您需要通过一个组件而不是元素你可以阅读更多关于差异的信息在 DOCS。

因此您需要将其更改为：
```
return <Route exact path={prop.path} component={() => c} key={key} />;
```

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

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

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

Dynamic Lazy Loading using React.Lazy (16.6.0)

javascript

reactjs

react-router-v4

react-async