React 动态导入不接受字符串变量答案

【问题标题】：React dynamic import does not accept string variableReact 动态导入不接受字符串变量
【发布时间】：2019-07-03 19:40:19
【问题描述】：

我有一个组件可以让我在 react 中动态导入图像。这是我正在使用的组件：

import React from "react";
import PropTypes from "prop-types";

// Lazily load an iamge
class LazyImageLoader extends React.Component {
    constructor() {
        super();
        this.state = {
            module: null,
        };
    }

    async componentDidMount() {
        try {
            const { resolve } = this.props;
            const { default: module } = await resolve();
            this.setState({ module });
        } catch (error) {
            this.setState({ hasError: error });
        }
    }

    componentDidCatch(error) {
        this.setState({ hasError: error });
    }

    render() {
        const { module, hasError } = this.state;

        if (hasError) return <div>{hasError.message}</div>;
        if (!module) return <div>Loading module...</div>;

        if (module) return <img src={module} alt="Logo" />;

        return <div>Module loaded</div>;
    }
}

LazyImageLoader.propTypes = {
    resolve: PropTypes.func.isRequired,
};

export default LazyImageLoader;

现在，如果我尝试像这样将这个组件与应该导入的图像的字符串一起使用，它工作得非常好：

<LazyImageLoader resolve={() => import("assets/images/os/netboot.svg")} />

但是，一旦我将 URL 提取到单独的变量中，它就不再起作用，并且我收到错误消息“找不到模块...”：

const path = "assets/images/os/netboot.svg";
<LazyImageLoader resolve={() => import(path)} />

有没有一种方法可以使用变量进行动态导入？

【问题讨论】：

奇怪 - 我只能假设 webpack 在编译时翻译导入字符串，因此无法从变量中找出路径。

标签： javascript reactjs webpack

【解决方案1】：

根据中的答案：

Dynamic imports in ES6 with runtime variables

“规范的 import() 规则与 Webpack 本身能够处理 import() 的规则不同”。

所以你不能在 webpack 动态导入语句中使用变量。

【讨论】：

【解决方案2】：

不能直接使用变量，但可以如下使用 -

const path = './test.jpg';
import(`${path}`);

【讨论】：

我希望它能工作，但在 React 中测试后，它不起作用。