Question

我想动态导入react js模块。该模块不是组件，它是数据的对象，因此我无法使用React代码拆分。 webpack docs中有一个带有承诺的示例。当我在react组件中像这样使用它时，它会引发错误，因为该组件会在承诺未解决之前尝试渲染。我想以这种方式导入它，以防数据不存在，我可以提供默认数据。

const dataProps = import(`./dataObject.js`).then(data=> data);

...
 render() {
  <SomeComponente data={data} />
}

Answer 1

我认为做到这一点的最佳方法是：

const dataProps = import(`./dataObject.js`); // Start the importing 

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state {
            data: null
        }
    }

    componentDidMount() {
        dataProps.then(data => this.setState({ data });
    }

    render() {
       if (this.state.data !== null) {
           return <SomeComponent data={this.state.data} />
       }
       return null;
    }
}

这样，仅在完成导入后，您才能实际渲染任何东西

使用webpack动态导入react js模块时发生错误

1 个答案: