TypeScript：“JSX.IntrinsicElements”类型上不存在属性“图标”答案

【问题标题】：TypeScript: Property 'icon' does not exist on type 'JSX.IntrinsicElements'TypeScript：“JSX.IntrinsicElements”类型上不存在属性“图标”
【发布时间】：2020-08-15 08:39:15
【问题描述】：

您好，我正在尝试使用带有 react-icons 的打字稿，如下所示：

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>

但我得到了这个错误：

“JSX.IntrinsicElements”类型上不存在属性“icon”。 TS2339

我似乎找不到正确的方法来做到这一点我无法找到正确的方法来执行此操作，如何通过我的数组传递图标或其名称并在 tsx 中呈现

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

在 JSX 中，小写标签用于内置元素，如 <div> <a> 或 <span>，它抱怨 <icon> 不是其中之一。对于自定义组件，您需要使用大写字母。如果您收到一个小写的道具，那很好，但您需要在将其用于 jsx 标记之前对其进行重命名。例如：

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

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

【讨论】：