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

我有一个子组件，不需要立即加载，我想分离出来。我试图通过

require有条件地加载react组件。请确保
。我没有收到任何控制台错误，但我也没有看到任何正在加载的内容。以下是我正在调用的代码：

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

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

renderContentzones（）{
如果（this.props.display）{
返回要求。确保（[]，（）=>{
const-Component=require（'./content-zones/Component.jsx'）。默认值；
返回(
);
});
}
返回null；
}

它当前只是呈现一个空白屏幕（没有错误）。以前，当我使用从“./content zones/component.jsx”导入“displayComponent”时，这一点就起作用了。
，并像您通常在react中那样返回它，而不是使用require.insure。我不知道我做错了什么，知道怎么做吗？谢谢
 这是一种方法，使用状态显示动态加载的组件：

   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>

    );

 }

constructor（）{
this.state={cmp:null}；
}
addComponent（）{
const ctx=这个；
require.确保（['../ZonesComponent']，功能（require）{
const ZonesComponent=require（'../ZonesComponent'）。默认值；
ctx.setState（{cmp:}）；
});
}
render（）{
返回(
一些信息
添加
{this.state.cmp}
);
}

当您按下“添加”按钮时，将显示该组件

希望有帮助。
如果您使用
console.log（Component）
，您会在控制台中看到什么？未定义？