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

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

   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>

    );

 }

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

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

1 个答案: