TypeScript: свойство 'icon' не существует для типа 'JSX.IntrinsicElements'

Question

Здравствуйте, я пытаюсь использовать машинопись с иконками реагирования следующим образом:

import { IconType } from 'react-icons';
import { FiAlertOctagon } from 'react-icons/fi';

export interface IDropdownItems {
  name: string;
  link: string;
}
export interface ITag {
  name: string;
  link: string;
  icon: IconType;
  dropdownItems: IDropdownItems[] | null;
  active: boolean;
}

export const SideBarTags: ITag[] = [
  {
    name: 'Tutoriais',
    link: '../tutorials',
    icon: FiAlertOctagon,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Avisos',
    link: '../news',
    icon: FiAlertOctagon,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Serviços',
    link: '../services',
    icon: FiAlertOctagon,
    active: false,
    dropdownItems: [
      { name: 'Elo Boost', link: '/eloBost' },
      { name: 'Duo Boost', link: '/duoBoost' },
      { name: 'MD10', link: '/eloBost' },
      { name: 'Coaching', link: '/duoBoost' },
      { name: 'Vitóriais', link: '/duoBoost' },
    ],
  },
  {
    name: 'Carteira',
    link: '../cartcredit',
    icon: FiAlertOctagon,
    active: false,
    dropdownItems: [
      { name: 'Histórico', link: '/history' },
      { name: 'Adicionar Crédito', link: '/add' },
    ],
  },
];

и сделал следующее в TSX:

<a>
  <icon />
  <span className="li-name">{name}</span>
</a>

, но я получил это сообщение об ошибке:

Свойство 'icon' не существует для типа 'JSX.IntrinsicElements'. TS2339

Кажется, я не могу найти правильный способ сделать это, я не могу найти правильный способ сделать это, как я могу передать значок или его имя через мой массив и визуализация в TSX

Answer 1

В JSX строчные теги используются для встроенных элементов, таких как <div> <a> или <span>, и жалуется, что <icon> не является одним из них. Для пользовательских компонентов необходимо использовать заглавную букву. Если вы получили реквизит в нижнем регистре, это нормально, но вам нужно переименовать его, прежде чем использовать его для тега jsx. Например:

const Example = (props) => {
  const Icon = props.icon;

  return (
    <a>
      <Icon />
      <span className="li-name">{name}</span>
    </a>
  )
}