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> 

    ); 

} 

が表示されます。
このヘルプが必要です。