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> 

    ); 

} 

При нажатии на кнопку добавить компонент будет показан.
Надеюсь, что эта помощь.