在对象中键入 SVG 元素反应

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 元素类型"图标"没有任何构造或调用签名。

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

有谁知道如何正确输入？

Answer 1

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

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

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"
}
};

工作示例

---

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

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

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