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

Question

我正在构建一个导航栏，其中包含很少的图标和标题。

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

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

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

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

正常用法是这样的<FaMobileAlt />，但就我而言，我试图迭代这个 const 来构建我的列表。

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}

或者，您也可以使用：

{itemDef.icon()}

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

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

{MyComponent()}

或者，

<MyComponent />

但不喜欢：

{MyComponent}

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

根据您的评论，您希望在组件中提供尺寸道具，如下所示：

<itemDef.icon size={20} />

而且{itemDef.icon()}不仅是有限的。您还可以在这里传递道具：

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

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