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' и просто вернул его так, как вы обычно реагируете, вместо этого требуют. Не уверен, что я здесь делаю неправильно, есть идеи, как сделать что-то подобное этой работе? Спасибо!

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>

    );

 }

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