时间戳

首页 > 解决方案 > 在对象中键入 svg 元素做出反应

javascript - 在对象中键入 svg 元素做出反应

问题描述

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

问题在于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 }}
/>

有谁知道如何正确输入？

标签： javascriptreactjstypescript

解决方案

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>
>

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

推荐阅读