javascript - 在 React 中插入映射的 SVG

问题描述

我正在做我的第一个更大的 React 项目，我已经花了一天的时间来解决这个看似简单的问题。请原谅我的术语中的错误。

所以我有大约一百个 svg，每个都放入函数中。既然他们这么多，我宁愿不碰这个文件，但如果是唯一的解决方案，在这一点上我愿意做任何事情。它们都按照下面的格式进行了格式化，除了更多的 svg 代码，为 JSX 格式化。

export function Example(props) {
  return (
    <svg viewBox='0 0 100 100' {...props}>
      <g fill='#000000'>
        <path d='long path here' />
      </g>
    </svg>
  );
}

这些被放在一个选择器中，这本身就花了一整天的时间来弄清楚。问题是，我试图通过它们映射以选择一个图标，并在映射后渲染它们，但我不知道如何。

{icons.map((icon, index) => {
  return (
    <IconMap
      key={index}
        onClick={() => {
        selectIcon(icon);
      }}
    >
    < Example>
    </IconMap>
  );
})}

因此，如果我只写它们，它们就会呈现，而不是使用 <{icon /> 或仅使用 {icon}。如何让被映射的图标渲染出来？我也很确定它们“在那里”可以这么说，因为我可以将鼠标悬停在它们应该在的位置上，并且在悬停时更改背景颜色的数量大约是合适的。

我尝试了各种方法，如果我更改我的图标文件以将 svg 数据作为变量返回，然后我将有一个单独的图标组件来呈现它，那么我基本上会写，但感觉它应该是一种更简单的方法，我不必重新编写数百个图标？

而且，这可能是一个完全独立的问题，但由于这是我一直在研究的与解决此问题相关的问题，因此我将其包括在内。我正在为这个项目使用 reactstrap，如果可以在 reactstrap 中创建一个“选择器”，例如下拉按钮或选项将显示在表格而不是列表中的表单（垂直列表100 多个图标需要大量滚动），我很乐意对整个内容进行硬编码，以便让它与我的其余代码一起在 reactstrap 中工作。

非常感谢，加油！

标签： javascriptreactjssvgreactstrap

不确定我是否正确理解了您的问题，您是否尝试动态生成图标？如果是这样，这是您可以做到的一种方法

import Icon1 from 'icons/icon1.svg';
import Icon2 from 'icons/icon2.svg';

const Icon = (props) => {
  const getIcon = name => {
    return {
      icon1: Icon1,
      icon2: Icon2,
    }
  }

  const IconComponent = getIcon(props.name);
  return (
    <IconComponent />
  );
}

然后你像这样在你的组件中使用它

{icons.map((icon, index) => {
  return (
    <IconMap
      key={index}
        onClick={() => {
        selectIcon(icon);
      }}
    >
      <Icon name={icon.name}>
    </IconMap>
  );
})}

javascript - 在 React 中插入映射的 SVG

问题描述

解决方案

推荐阅读