Webpack require.ensure(代码拆分),反应组件不起作用?

时间:2016-10-13 09:30:51

标签: javascript reactjs webpack babeljs

我有以下组件。它不会在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');
    }
}

编辑

我认为这与需要确保调用的异步性质有关,请帮助

1 个答案:

答案 0 :(得分:1)

只有在更新了组件的状态或道具时,React才会重新渲染。在您的示例中,它们都不会因为异步提取而不呈现组件。

我建议您使用此博文中描述的this.statehttp://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/