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

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-defined-components-must-be-capitalized

Answer 2

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