我需要什么来利用组件如何道具

Question

我有对象的数组

const userProfileRoutes = [
{
id: 0,
path: "userInfo",
name: "My profile",
icon: CgProfile, // from react-icons
},
{
id: 1,
path: "adminPanel",
name: "Admin panel",
icon: MdAdminPanelSettings, // from react-icons
},
{ id: 2, path: "editPanel", name: "Edit profile", icon: AiTwotoneSetting // from react-icons },
{ id: 3, path: "cart", name: "Cart", icon: AiOutlineShoppingCart // from react-icons },
];

我在这里使用这个阵列

{userProfileRoutes.map(({ id, path, name, icon }) => (
<>
// here I'd like to use icon props
<MenuItem key={id} link={path}>
{name}
</MenuItem>
</>
))}

我想使用图标道具组件，因为它是组件
我需要什么？

Answer 1

您只需要将图标名称的第一个字母大写即可。这可以在销毁过程中完成：

{userProfileRoutes.map(({ id, path, name, icon: Icon }) => (
<>
<Icon />
<MenuItem key={id} link={path}>
{name}
</MenuItem>
</>
))}

来源：https://reactjs.org/docs/jsx-in-depth.html#user-定义的组件必须大写

Answer 2

{
userProfileRoutes.map(({ id, path, name, icon }) => (
<>
<icon />
<MenuItem key={id} link={path}>
{name}
</MenuItem>
</>
));
}