如何呈现名称由数组映射给出的组件？

Question

我有一个数据数组，像这样：

export const links = [
  {
    name: 'Facebook',
    url: 'https://facebook.com',
    icon: 'SiFacebook',
  },
  /* ... rest of it */
]

然后，对于这些 icon 名称中的每一个，我都有一个组件（实际上是一个使用 React Icons 的图标，例如，我将呈现：

<SiFacebook />

因此，在我将其映射到我的页面后，我需要呈现如下内容：

                  {links.map((link: any, index: any) => (
                      
                    <li
                      key={index}
                      className="w-60 rounded-md bg-neutral-focus grid grid-cols-1 p-3 mx-2"
                    >
                      {React.createElement(`${link.icon}` ,{})}
                      <a
                        href={link.url}
                        target="_blank"
                        rel="_noreferrer"
                        className="text-sm font-bold"
                      >
                        {link.name}
                      </a>
                    </li>
                  ))}

所以我需要将每个 link.icon 渲染为一个组件。我尝试使用 React.createElement 但它没有用。其他方式也没有用。我做错了什么？

Answer 1

这是不可能的，因为您还需要根据 React 图标文档导入图标 --> https://react-icons.github.io/react-icons/ 在您尝试渲染的地方，另一种更好的方法是将图标作为组件发送来自这样的数组

import { FaBeer } from 'react-icons/fa';

export const links = [
  {
    name: 'Facebook',
    url: 'https://facebook.com',
    icon: <FaBeer />,
  },
  /* ... rest of it */
]

如何呈现名称由数组映射给出的组件？

How to render a component which name is given by an array mapping?

javascript

arrays

typescript

reactjs

react-component