如何从对象的属性中渲染组件？

Question

我正在构建一个包含少量图标和标题的导航栏。

为了构建它，我使用了react-icons (https://www.npmjs.com/package/react-icons)。 所以，我在这里导入这些项目

import { FaMobileAlt, FaCreditCard, FaRegBuilding } from 'react-icons/fa';

我有一个 const 负责保存菜单项列表

const LEFT_MENU_ITEMS = [
  { key: 'devices', icon: FaMobileAlt, title: 'Devices' },
  { key: 'cards', icon: FaCreditCard, title: 'Cards' },
  { key: 'business', icon: FaRegBuilding, title: 'Business' },
];

正常的用法类似于<FaMobileAlt />，仅此而已，但在我的情况下，我正在尝试迭代这个常量来构建我的列表。

buildLeftMenuBar() {
if (!this.props.loggedIn) return null;
return (
  <ul key="leftMenuBar" className="items">
    {_.map(LEFT_MENU_ITEMS, itemDef => (
      <li key={itemDef.key}>
        <NavLink to={`/${itemDef.key}`}>
          <div>
          >>>>>  {itemDef.icon} <<<< 
          </div>
          <span>{itemDef.title}</span>
        </NavLink>
      </li>
    ))}
  </ul>
);

}

我在渲染页面时遇到的错误是

函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。

因此，每个图标都不会被渲染。我怎样才能让它按照同样的想法工作？

ps：这不仅仅是 3 个项目，我只是删除了一些以便更容易阅读问题，这就是我尝试迭代的原因。

Answer 1

你可以这样使用：

<itemDef.icon />

而不是这个：

{itemDef.icon}

或者，你也可以使用like：

{itemDef.icon()}

---

您可能想知道这里发生了什么。所以，让我稍微解释一下：

当你想渲染一个组件时说MyComponent，你将能够像这样打印：

{MyComponent()}

或者，

<MyComponent />

但不喜欢：

{MyComponent}

因为，您需要调用该函数。就是这样。

---

根据您的评论，您希望按照您所说的在组件中提供 size 道具：

<itemDef.icon size={20} />

{itemDef.icon()} 不仅限于此。你也可以在这里传递道具：

{itemDef.icon({size:20})} // component receives size props 20

不过，我建议使用<itemDef.icon size={20} />，因为它的用法有点清晰。

Answer 2

You can do it like this:

return(
  <ul key="leftMenuBar" className="items">
     {_.map(LEFT_MENU_ITEMS, item => {
        const Icon = item.icon;
        return (
            <li key={itemDef.key}>
                <NavLink to={`/${itemDef.key}`}>
                   <Icon />
                   <span>{itemDef.title}</span>
                </NavLink>
            </li>
        );
     })}
  </ul>
);