在react中导入文件夹中的所有文件

Question

我通过 index.jsx 从“icons”文件夹中导入所有 SVG，如下所示：

索引.jsx：

export about from './about.svg';

这是导入：Button.jsx

import React from 'react';
import './MenuIcon.scss';
import * as IconID from './icons';

const Button = (props) => {
    return (
        <div className="menu-icon" >
            <div className={'menu-icon__icon-wrapper'}>
                <IconID.about /> // This works great
                <IconID['about'] /> // This does not work
            </div>
        </div>
    );
};

export default Button;

现在要获取特定的 Svg，例如我只需调用返回方法，一切正常。

现在我想加载不同的 SVG，例如：

const svgName = 'back';

return (<IconId['back'] />);

我怎样才能使这成为可能？

Answer 1

使用React.createElement元素动态定义语法而不是 JSX，因为它仅适用于编译时标识符。

React.createElement(IconId.back, {...props}, [...children])