Question

我正在导入所有SVG＆＃39;图标＆＃39;通过index.jsx，如下一行：

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，例如我只是在返回方法中调用，一切正常。

现在我想加载不同的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$/)
)

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

2 个答案: