Webpack要求.确保(代码分裂)与react组件不工作

Webpack require.ensure(code splitting) with react component not working?

本文关键字：react 组件 工作 分裂 要求 确保 代码 Webpack      更新时间：2023-09-26

我有下面的组件。它不会在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的异步性质有关，请帮助

React只会在组件的状态或道具被更新时才会重新渲染。在您的示例中，两者都不是，因此它不会呈现组件，因为它是异步获取的。

我建议您使用这篇博客文章中描述的this.state: http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/

相关文章：