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 />，仅此而已，但就我而言，我试图遍历此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子代无效。如果您返回一个Component而不是从render返回，则可能会发生这种情况。

因此，不会渲染每个图标。我如何才能遵循相同的想法？

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} />，因为它的用法有点不清楚。

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>
);

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

2 个答案: