如何根据 React 中变量的给定名称导入和渲染 svg 文件？答案

【问题标题】：How to import and render svg file based on given name from variable in React?如何根据 React 中变量的给定名称导入和渲染 svg 文件？
【发布时间】：2021-03-21 16:10:30
【问题描述】：

问题

我有一个大的类别数组和一个变量，其值是类别之一，比如说

const categories = ['a1', 'a2', ..., 'a200'];
const category = 'a57';

我有一个svg文件对应每个类别名称：'a1.svg', 'a2.svg', ..., 'a200.svg'

我的问题是，我只需要渲染一个 svg 文件，基于来自 categories 数组的变量，我无法将其渲染为图像，因为我需要能够更改它的填充/描边值。

<img src={`./images/${category}.svg} />

我尝试导入所有像这样的 svg

import {ReactComponent as a1} from './images/ai.svg';

并将所有这些导入放入数组中。但是当我这样做时，我有一个像this 这样的对象数组。理论上我可以使用它，但是我的一些类别有空格和其他符号，我不能使用 .render.name 值，因为你不能像这样导入 {ReactComponent as武术}。这也很不舒服，因为我需要做很多导入而不是做类似的事情

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} 的对象）。如果您打算渲染一组子项，请改用数组。

目标

根据类别变量仅渲染一个 svg 组件，其值可以是类别数组中的任何内容。此外，如何正确导入这些 svg，让我能够轻松地呈现 svg 并在 CSS 中更改其填充/描边值。

类似于使这样的导入工作

import {ReactComponent as imageCategory} from `./images/${category}.svg`

【问题讨论】：

标签： javascript reactjs svg

【解决方案1】：

错误：

错误：对象作为 React 子对象无效（找到：带键的对象 {$$typeof, 渲染})。如果你打算渲染一组孩子，改为使用数组。

这是因为你没有渲染组件，你只是获取了组件实例：

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

【讨论】：