我想将我的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[]=获取完整消息，或使用非缩小的开发环境获取完整错误和其他有用警告。
谁能告诉我我做错了什么？
>
我建议您在加载依赖项时提供某种形式的内容来进行反应。我会推荐某种装入消息。
您需要确保在加载完成时重新发送组件。实现这一点的最简单方法是将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>
);
}
}
