在对象中输入 svg 元素做出反应

Posted 2023-03-13

【中文标题】在对象中输入 svg 元素做出反应

【英文标题】：typing svg element react in an object

【发布时间】：2020-05-21 20:10:13

【问题描述】：

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

问题在于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   viewBox="0 0 18 18" ...props>
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="..."
    />
  </svg>
);

然后显示如下错误：

JSX 元素类型“图标”没有任何构造或调用签名。

const Icon = currentTeam.icon;

<Icon
  
  
  style= color: currentTeam.color 
/>

有人知道如何正确输入吗？

【问题讨论】：

你能把这个放在typescriptlang.org/play/index.html 作为一个最小的例子，然后把链接放在这里吗？

当然，虽然它的反应可能会很棘手。交给我吧

React works fine

啊，与此同时，我已经为您工作了 - codesandbox.io/s/cool-dewdney-tvme5 如果您将鼠标悬停在带红色和黄色下划线的代码上，您可以看到错误。让我知道这是否可行，否则可以在这个 ts 操场上添加一些东西。代码沙箱显示完全相同的错误

是的。你在teamObject 的类型中使用了它两次。 Record takes a union of strings 作为属性名称和类型，并将所有这些属性名称的类型设置为该类型。当您拥有可以轻松提前知道的不同类型的属性时，这不是您想要的。

【参考方案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"
  
;

Working example

---

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

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

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

【讨论】：

我遇到了这个确切的问题，但这个解决方案无法解决任何问题。唯一的区别是图标来自node_modules。我猜我的 TSConfig 出了点问题，以至于没有拾取打字？