javascript - React/webpack 有条件返回 require.ensure 组件（代码拆分）

Question

我有一个不需要立即加载的子组件，我想拆分它。我正在尝试通过有条件地加载反应组件require.ensure。我没有收到任何控制台错误，但我也没有看到任何正在加载的内容。这是我正在调用的代码：

renderContentzones() {
if (this.props.display ) {
  return require.ensure([], () => {
    const Component = require('./content-zones/component.jsx').default;

    return (
      <Component
        content={this.props.display}
        />
    );
  });
}
return null;
}

它目前只是呈现一个空白屏幕（没有错误）。这以前在我使用import 'displayComponent' from './content-zones/component.jsx'并像您通常会做出反应一样返回它时起作用，而不是这个 require.ensure 但是。不知道我在这里做错了什么，知道如何做这样的事情吗？谢谢！

Answer 1

这是一种方法，使用状态来显示动态加载的组件：

   constructor(){
    this.state = {cmp:null};
   }

   addComponent() {
        const ctx = this;
        require.ensure(['../ZonesComponent'], function (require) {
            const ZonesComponent = require('../ZonesComponent').default;
            ctx.setState({cmp:<ZonesComponent />});
        });
    }

    render(){
    return (
        <div>
            <div>Some info</div>
            <div><button onClick={this.addComponent.bind(this)}>Add</button></div>

            <div>
                 {this.state.cmp}
            </div>
        </div>

    );

 }

当您按下按钮添加组件时，将显示。
希望这有帮助。