动态导入后如何安装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无法渲染它，因为仪表板是对象：

“ React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。”

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可以得到更多的简化和增加的功能。