在数组中渲染 React 元素

Question

我有一个项目数组，由一个字符串和一个图标组件定义：

type MyItem = {
  Title: string;
  Icon: React.ElementType;
};

export const MyItems: MyItem[] = [
  { Title: "Inbox", Icon: InboxIcon },
  { Title: "Users", Icon: UserIcon },
  { Title: "Settings", Icon: SettingsIcon },
];

现在我想在组件中显示它们：

<>
    {MyItems.map((item, index) => (
      <h1>item.Title</h1>
      // render icon component here: item.Icon
    ))}
</>

如何渲染图标组件（不改变数组结构）？

Answer 1

我猜你的图标本质上是 React 组件。如果是这样，那么您可以试试下面的代码：

<>
    {MyItems.map((item, index) => (
      <>
      <h1>item.Title</h1>
      {item.Icon}
      </>
    ))}
</>

在数组中渲染 React 元素

Render React Element within Array

arrays

components

typescript

reactjs