时间戳

首页 > 解决方案 > 如何根据 React 中变量的给定名称导入和渲染 svg 文件？

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

问题描述

问题

我有大量的类别和一个变量，其值是类别之一，可以说

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';

并将所有这些导入放入数组中。但是当我这样做时，我有一个这样的对象数组。理论上我可以使用它，但是我的一些类别有空格和其他符号，我不能使用.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`

标签： javascriptreactjssvg

解决方案

错误：

错误：对象作为 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)}

推荐阅读