Визуализация текстового имени как компонента в ReactJS

Question

У меня есть javascript объект, который выглядит примерно так:

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

Затем я отображаю этот объект в компоненте React следующим образом:

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

The as реквизит из S связанных компонентов .

С учетом сказанного, это не работает. Однако, если бы я передал код так, он бы работал:

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

с Lightbulb, полученным из react-icon:

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

Мой вопрос, как можно ли заставить это работать при извлечении имени из объекта js?

Answer 1

Проблема здесь, box.icon - это просто строка, а то, что вы хотите, это компонент. Стилизованный компонент не может понять эту строку, потому что это не тег HTML. Итак, вы можете сопоставить все нужные вам значки компонентов в объекте, а затем передать правильный в соответствии с box.icon.

Вы получите что-то вроде этого

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

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


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