Question

我有一个组件，可以通过它动态地导入图像。这是我正在使用的组件：

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)} />

是否可以使用变量进行动态导入？

Answer 1

根据以下答案：

Dynamic imports in ES6 with runtime variables

“该规范的import（）规则与Webpack本身能够处理import（）的规则不同。”

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

Answer 2

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

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

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

2 个答案: