React - 如何将对象中的图标指定为值

问题描述

我之前有一个包含对象的数组，我应用了 fontAwesome 中的图标作为值，它看起来像这样

const SideBarColors = [
   {
        IconStyle: {
            Icon: faDotCircle,}
   }
]

然后在另一个组件中我得到了这样的图标

<FontAwesomeIcon icon={SideBarStyle.Icon} />

现在我使用不同的方法（React Icons），重点是现在我用这种方式创建图标

<BsBraces />

在这种情况下，我不能将对象内的这个图标指定为一个值，它会给出一个错误

IconStyle: {
    IconTitle: <BsBraces />
}

这种情况我该怎么办？

解决方法

你只需要：

IconStyle: {
    IconTitle: BsBraces
}

没有 </>

将其应用到 JSX 中，例如：

<IconStyles.IconTitle />