时间戳

首页 > 解决方案 > 动态他导入后如何挂载React组件

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

问题描述

尝试在 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：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。”

标签： reactjsimport

解决方案

您正在尝试渲染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更多简化和附加功能。

推荐阅读