React - 向由 object 表示的組件添加道具

Question

是否可以向由 object 表示的組件添加道具？ 如果可能的話，我只想在 map function 中添加一次這些道具。

children: [
    {
      id: '1',
      isActive: false,
      label: 'Home',
      component: <ReportsIcon height={30} width={30} />,
    },
    {
      id: '2',
      isActive: true,
      label: 'Dashboard',
      component: <SettingsIcon height={30} width={30} />,
    },
  ].map((item) => (
    <MenuLink key={item.id} isActive={false} label={item.label}>
      <a href={`#`}>
        {item.component // ADD PROPS HERE //}
        {item.label}
      </a>
    </MenuLink>
  )),

Answer 1

Njuguna Mureithi 1 提出的兩個選項。

children: [
    {
      id: '1',
      isActive: false,
      label: 'Home',
      component: props => <ReportsIcon height={30} width={30} {...props} />,
    },
    {
      id: '2',
      isActive: true,
      label: 'Dashboard',
      component: props => <SettingsIcon height={30} width={30} {...props} />,
    },
  ].map((item) => (
    <MenuLink key={item.id} isActive={false} label={item.label}>
      <a href={`#`}>
        {item.component({ prop: 123 })}
        {item.label}
      </a>
    </MenuLink>
  )),

children: [
    {
      id: '1',
      isActive: false,
      label: 'Home',
      component: ReportsIcon,
    },
    {
      id: '2',
      isActive: true,
      label: 'Dashboard',
      component: SettingsIcon,
    },
  ].map((item) => (
    <MenuLink key={item.id} isActive={false} label={item.label}>
      <a href={`#`}>
        <item.component height={30} width={30} prop={123} />
        {item.label}
      </a>
    </MenuLink>
  )),