Реагировать, как динамически выбирать компонент для рендеринга

Мне нужно было отобразить список пунктов в меню, каждый со своим значком.

Изначально я жестко запрограммировал компонент в меню, вот так:

const menu = [
  {
    title: 'Home',
    icon:  
  },
  { title: 'Notifications', icon:  },
  { title: 'Profile', icon:  },
]

используя очень классный пакет @heroicons/react .

В JSX я повторил меню массива, чтобы показать {элемент.значок}

Но затем мне пришлось изменить классы попутного ветра, которые я использовал, в зависимости от состояния отзывчивости приложения, для которого я использовал пакет реагировать-реагировать .

Вместо этого я решил передать строку, поэтому сначала сделал это:

const menu = [
  { title: 'Home', icon: 'HomeIcon' },
  { title: 'Notifications', icon: 'BellIcon' },
  { title: 'Profile', icon: 'UserIcon' },
]

const Icon = (props) => {
  const { name } = props

  let icon = null
  if (name === 'HomeIcon') icon = HomeIcon
  if (name === 'BellIcon') icon = BellIcon
  if (name === 'UserIcon') icon = UserIcon

  return React.createElement(icon, { ...props })
}

...

Другим возможным решением было бы использовать объект для поиска компонентов вместо набора если проверяет:

const icons = {
  HomeIcon,
  BellIcon,
  UserIcon,
}

const Icon = (props) => {
  const { name } = props

  const TheIcon = icons[name]
  return 
}

Мне пришлось использовать Значок , поскольку компоненты React по соглашению начинаются с заглавной буквы.

Этого было достаточно, но затем я понял, что могу сделать это гораздо более простым способом, используя фактический компонент вместо строки в массиве меню :

const menu = [
  { title: 'Home', icon: HomeIcon },
  { title: 'Notifications', icon: BellIcon },
  { title: 'Profile', icon: UserIcon },
]

const Icon = (props) => {
  const { icon } = props
  const TheIcon = icon
  return 
}

...

Оригинал: “https://flaviocopes.com/react-dynamically-render-component/”