无法在 React 中呈现图标组件

Question

我有一个要渲染的图标列表。 我是新手，请帮忙。 下面是我的代码

import { GlobeAltIcon, ComputerDesktopIcon } from '@heroicons/react/24/outline'

const icons = [
    {
        id: 1,
        name: GlobeAltIcon
    },
    {
        id: 2,
        name: ComputerDesktopIcon
    },
}
const App = () => {
    return (
        {icons.map((icon)=>(
              <div key={icon.id}>
                {icon.name}
              </div>
         ))}
    )
}

每当我尝试呈现图标组件时，代码都会返回错误。 请帮帮我

Answer 1

因为它是一个图标和一个 JSX，所以你必须像组件一样渲染它，如下所示：

const App = () => {
    return (
        {icons.map((icon)=>(
              <div key={icon.id}>
                <icon.name />
              </div>
         ))}
    )
}

Answer 2

您可以像这样使用 map 内的图标

<icon.name/>