时间戳

首页 > 解决方案 > 在 ReactJS 中将文本名称呈现为组件

javascript - 在 ReactJS 中将文本名称呈现为组件

问题描述

我有一个看起来像这样的 javascript 对象：

export const iconBoxes = [
  {
    ...
    icon: 'Lightbulb',
    ...
  },
  {
    ...
    icon: 'Sun',
    ...
  }
]

然后我在 React 组件中映射该对象，如下所示：

{iconBoxes.map(box => {
  return (
    <Box>
        ...
        <Icon as={box.icon} />
        ...
    </Box>
  )
})}

该as道具来自 S风格的Components。

话虽如此，这不起作用。但是，如果我要这样编写代码，它将起作用：

<Box>
  ...
  <Icon as={Lightbulb} />
  ...
</Box>

Lightbulb来自react-icon：_

import { FaRegLightbulb as Lightbulb } from 'react-icons/fa'

我的问题是，当从 js 对象中提取名称时，我怎样才能让它工作？

标签： javascriptreactjsstyled-components

解决方案

这里的问题是 box.icon 只是一个字符串，而你想要的是一个组件。样式化组件无法理解此字符串，因为它不是 HTML 标记。所以你可以做的就是将你需要的所有图标组件映射到一个对象中，然后根据box.icon传递正确的一个。

你最终会得到这样的东西

import { FaRegLightbulb } from 'react-icons/fa'

const allIcons = {
  "Lightbulb": FaRegLightbulb,
  ...
}


<Icon as={allIcons[box.icon]} />

推荐阅读