Webpack require.ensure (разделение кода) с компонентом реакции не работает?

Question

У меня есть нижний компонент. Он не отображает модуль продукта в dom, а также не показывает никаких ошибок в консоли.

И если я использую ReactDOM.render(<ProductModule/>,document.getElementById('product-container'));, он работает.

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
class ProductModuleWrapper extends Component { 
    constructor(props) { 
    } 

    render() { 
     return (
      <div className="product-container"> 
       {this.renderProductModules()} 
      </div> 
     ); 
    } 

    renderProductModules() { 
     require.ensure([],(require) => { 
      var ProductModule = require('../ProductModule').default; 
      return ProductModule; 
     },'productmodule'); 
    } 
} 

редактировать:

Я думаю, что это что-то делать с асинхронным характером Требовать обеспечения вызова, пожалуйста, помогите

Answer 1

React будет только вновь сделать, если состояние или реквизита компонента есть был обновлен. В вашем примере ни один из них не будет отображать компонент, поскольку он извлекается асинхронно.

Я рекомендую вам использовать this.state, как описано в этом блоге: http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/