如何渲染属性 of object 的组件？

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

}

渲染页面时出现的错误是

Functions are not valid as a React child. This may happen if you return a Component instead of from render.

所以，每个图标都没有被渲染。我怎样才能按照同样的想法让它发挥作用？

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

Answer 1

你可以这样使用：

<itemDef.icon />

而不是这个：

{itemDef.icon}

或者，您也可以使用 like:

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

如何渲染属性 of object 的组件？

How to render the component from property of object?

javascript

reactjs

如何渲染 属性 of object 的组件？

How to render the component from property of object?

javascript

reactjs

如何渲染属性 of object 的组件？