根据数据库提供的名称导入和渲染React组件？

Question

我正在为我的SVG图标使用React组件，例如：

const ErrorIcon = props => {
  const { color } = props;
  return (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.206 94.8">
        <path
          d="M55.7 82.9v2.8c0 2.2-1."
          fill={color}
        />
      </svg>
  );
};

我有一个页面，我需要根据来自数据库的ID提供的名称来应用图标

const data = [{ id: "dog", name: "A Dog" }, { id: "cat", name: "A kitty"}]

如果我是基于类名称的样式，那么我可以像这样呈现ID：

 const MyComponent = props => {
  return (
    <ul>
      {
        data.map(item=>{
            return(<li className={`Icon Icon--${item.id}`} key={item.id}>{item.name}</li>)
        })
      }
     </ul>
  );
};

风格与：

.Icon--dog {
  background: url(dog.jpg);
}

有什么办法可以让我的图标保持为React组件吗？

Answer 1

您可以创建类型到这样的组件的映射：

import {DogIcon, CatIcon} from './icons';

const iconMap = {
    dog: DogIcon,
    cat: CatIcon,
};

然后像这样呈现：

const MyComponent ({data}) => (
    <ul>
        {data.map(item => {
            const Icon = iconMap[item.type];
            return (
                <li>
                    <Icon />
                    {item.name}
                </li>
            );
        })}
    </ul>
);