javascript - 根据数据库提供的名称导入和渲染 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 组件的同时做到这一点？

标签： javascriptreactjs

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