javascript - 键入 svg 元素在对象中使用react

Question

我在输入以下内容时遇到问题。

问题在于 TeamIcon .

我的对象定义如下。

import TeamIcon from './components/icons/TeamIcon';

export const teamObject: Record<
  string,
  Record<string, string | React.ReactSVGElement>
> = {
  team: {
    icon: TeamIcon,
    color: '#B2649B',
  }
}

我的 TeamIcon看起来像这样:

export default (props: React.SVGProps<SVGSVGElement>) => (
  <svg width="18" height="14" viewBox="0 0 18 18" {...props}>
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="..."
    />
  </svg>
);

然后显示以下错误:

JSX element type 'Icon' does not have any construct or call signatures.

const Icon = currentTeam.icon;

<Icon
  width="29px"
  height="29px"
  style={{ color: currentTeam.color }}
/>

有谁知道如何正确输入？

Answer 1

TeamIcon这里不是类型，它是局部变量的名称，具有 React 功能组件的值。

所以我认为你想要这样的东西，它是 React 功能组件的类型，带有你选择的 Prop 。

icon: React.FC<React.SVGProps<SVGSVGElement>>

一个完整的例子是这样的:

interface TeamObject {
  team: {
    icon: React.FC<React.SVGProps<SVGSVGElement>>,
    color: string,
  }
}

const teamObject: TeamObject = {
  team: {
    icon: TeamIcon,
    color: "#B2649B"
  }
};

Working example

你会注意到我摆脱了这个:

Record<
  string,
  Record<string, string | React.ReactSVGElement>
>

我不太确定这样做的目的是什么，但您显然有两个类型非常不同的属性。你有 icon这是一个返回 React.ReactNode 的函数你有 color这是一个字符串。所以你应该明确地输入这些。