动态他导入后如何挂载React组件

Question

在 React 组件中尝试过这段代码：

this.setState({
    module: import ('../1superSet/dashboard/containers/Dashboard'), // eslint-disable-line
  });

- 必须在某个请求之后导入。 下一个：

{this.state.module && this.state.module.then((res) => {
      console.log('res', res)
      const Dashboard = res
      return (<Dashboard />)
    })}

但是 React 不能渲染这个，因为 Dashboard 是对象：

“React.createElement: type is invalid - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。”

Answer 1

您正在尝试渲染Promise (this.state.module.then)。您应该加载组件并仅在加载后将其设置在侧面。

foo() {
  const Dashboard = await import('../1superSet/dashboard/containers/Dashboard');
  this.setState({ Dashboard });
}

然后您可以通过执行以下操作来渲染它：

render() {
  const { Dashboard } = this.state;

  return (
    <div>
      { Dashboard && (<Dashboard/>)
    </div>
  );
}

---

查看React.lazy 以获得更多简化和附加功能。