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> 

    ); 

} 

當您按下按鈕，添加該組件將被顯示。
希望得到這個幫助。