Webpack require.ensure（代碼拆分）與React組件不起作用？

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');
    }
}

編輯：

我認為這與require sure調用的異步性質有關，請幫助

Answer 1

只有在組件的狀態或道具已更新時，React才會重新渲染。 在您的示例中，兩者都不是，因此它不會呈現組件，因為它是異步獲取的。

我建議您按照此博客文章中所述使用this.state ： http : //blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/