我有很多类别，并且有一个变量，其值为类别之一，可以说
const categories = ['a1', 'a2', ..., 'a200'];
const category = 'a57';
我有一个与每个类别名称相对应的svg文件：'a1.svg'，'a2.svg'，...，'a200.svg'
我的问题是，我只需要基于一个来自categorys数组的变量来渲染一个svg文件，就不能将其渲染为图像，因为我需要能够更改其fill / stroke值。
<img src={`./images/${category}.svg} />
我试图像这样导入所有的svg
import {ReactComponent as a1} from './images/ai.svg';
并将所有这些导入放置在数组中。但是，当我以这种方式进行操作时，我有一个像这样的对象数组。从理论上讲我可以使用它，但是我的某些类别中有空格和其他符号，并且我不能使用.render.name值，因为您不能像这样{ReactComponent as martial arts}导入。这也是令人不舒服的原因，因为我需要做很多导入而不是做类似的事情
const images = categories.map(category => {
return {
name: category,
svg: require(`./images/${category}.svg`
}
})
我也试图制作一个看起来像这样的对象数组
const images = [ {name: 'a1', svg: a1}, {name: 'a2', svg: a2} ];
并渲染为
{images.find(img => img.name === category).svg}
但我不能导致它给我这个错误
错误：对象作为React子对象无效（找到：键为{$$ typeof，render}的对象）。如果要渲染子级集合，请改用数组。
根据category变量仅渲染一个svg组件，该组件的值可以是category数组中的任何内容。另外，如何以一种允许我轻松呈现svg并在CSS中更改其填充/描边值的方式正确导入这些svg。
类似这样的导入工作的东西
import {ReactComponent as imageCategory} from `./images/${category}.svg`
错误：对象作为React子对象无效（找到：键为{$$ typeof，render}的对象）。如果要渲染子级集合，请改用数组。
发生这种情况是因为您没有呈现组件，而只是获得了组件实例：
const Svg = images.find(img => img.name === category).svg //--> component instance
return <Svg /> //--> render it
//--> **Note:** this just an example it won't work because it won't find the module.
如果使用Webpack，则可以使用require.context：
const svgDir = require.context("!@svgr/webpack!./images");
const images = categories.map(category => {
return {
name: category,
svg: svgDir(`./${category}.svg`).default
}
});
然后：
const renderImgByCategory = (category) => {
const Svg = images.find(img => img.name === category).svg;
return <Svg/>
}
JSX：
{renderImgByCategory(category)}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句