TypeScript：“JSX.IntrinsicElements”类型上不存在属性“icon”

Question

您好，我正在尝试将打字稿与反应图标一起使用，如下所示：

\n\n

import { IconType } from \'react-icons\';\nimport { FiAlertOctagon } from \'react-icons/fi\';\n\nexport interface IDropdownItems {\n  name: string;\n  link: string;\n}\nexport interface ITag {\n  name: string;\n  link: string;\n  icon: IconType;\n  dropdownItems: IDropdownItems[] | null;\n  active: boolean;\n}\n\nexport const SideBarTags: ITag[] = [\n  {\n    name: \'Tutoriais\',\n    link: \'../tutorials\',\n    icon: FiAlertOctagon,\n    dropdownItems: null,\n    active: false,\n  },\n  {\n    name: \'Avisos\',\n    link: \'../news\',\n    icon: FiAlertOctagon,\n    dropdownItems: null,\n    active: false,\n  },\n  {\n    name: \'Servi\xc3\xa7os\',\n    link: \'../services\',\n    icon: FiAlertOctagon,\n    active: false,\n    dropdownItems: [\n      { name: \'Elo Boost\', link: \'/eloBost\' },\n      { name: \'Duo Boost\', link: \'/duoBoost\' },\n      { name: \'MD10\', link: \'/eloBost\' },\n      { name: \'Coaching\', link: \'/duoBoost\' },\n      { name: \'Vit\xc3\xb3riais\', link: \'/duoBoost\' },\n    ],\n  },\n  {\n    name: \'Carteira\',\n    link: \'../cartcredit\',\n    icon: FiAlertOctagon,\n    active: false,\n    dropdownItems: [\n      { name: \'Hist\xc3\xb3rico\', link: \'/history\' },\n      { name: \'Adicionar Cr\xc3\xa9dito\', link: \'/add\' },\n    ],\n  },\n];\n

\n\n

并在 tsx 中执行了以下操作：

\n\n

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

\n\n

但我得到了这个错误：

\n\n

\n

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

\n

\n\n

我似乎找不到正确的方法来执行此操作\n我无法找到正确的方法来执行此操作，如何通过我的数组传递图标或其名称并在 tsx 中渲染

\n

Answer 1

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

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

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