Async React.Component对我不起作用

Question

我想将我的React应用程序按块拆分，但遇到了一个问题。React.Component不呈现通过Require.Consure加载的子React.Component。下面的示例代码。
文件一:

let Child;
class Parent extends React.Component {
  constructor() {
      super();
      require.ensure(['child'], () => {
        Child = require('child');
      });
  }
  render() {
    return (
      <div>
        {!!Child && <Child/>}
      </div>
    );
  }
}

文件二

class Child extends React.Component {
  render() {
    return <div>hello world</div>;
  }
}

module.exports = Child;

然后检索下一个错误:

未捕获的错误：缩小的React错误#130；访问http://facebook.github.io/react/docs/error-decoder.html？invariant=130&args[]=未定义&args[]=获取完整消息，或使用非缩小的开发环境获取完整错误和其他有用警告。

谁能告诉我我做错了什么？

Answer 1

>

我建议您在加载依赖项时提供某种形式的内容来进行反应。我会推荐某种装入消息。

您需要确保在加载完成时重新发送组件。实现这一点的最简单方法是将require调用的结果存储在组件状态中，而不是全局状态中。

例如,您的代码可能如下所示：

class Parent extends React.Component {
  constructor() {
      super();
      require.ensure(['child'], () => {
        this.setState({Child: require('child')});
      });
  }
  render() {
    return (
      <div>
        {'Child' in this.state ? <this.state.Child/> : "Loading..."}
      </div>
    );
  }
}