从反应文件夹中导入所有文件

Question

我正在通过 index.jsx 从 'icons' 中的文件夹导入所有 SVG，如下所示：

index.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，例如我只是调用 return 方法，一切正常。

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

const svgName = 'back';

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

我怎样才能做到这一点？

Answer 1

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

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

Answer 2

你可以在这里使用上下文

const importAll = (r) => {
  return r.keys().map(r);
};

const allData = importAll(
  require.context("./icons", false, /\.svg$/)
)

从反应文件夹中导入所有文件

Importing all files from a folder in react

import

jsx

reactjs