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

【问题标题】：typing svg element react in an object在对象中输入 svg 元素做出反应
【发布时间】：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 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 }}
/>

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

【问题讨论】：

你能把这个放在typescriptlang.org/play/index.html 作为一个最小的例子，然后把链接放在这里吗？
当然，虽然它的反应可能会很棘手。交给我吧
React works fine
啊，与此同时，我已经为您工作了 - codesandbox.io/s/cool-dewdney-tvme5 如果您将鼠标悬停在带红色和黄色下划线的代码上，您可以看到错误。让我知道这是否可行，否则可以在这个 ts 操场上添加一些东西。代码沙箱显示完全相同的错误
是的。你在teamObject 的类型中使用了它两次。 Record takes a union of strings 作为属性名称和类型，并将所有这些属性名称的类型设置为该类型。当您拥有可以轻松提前知道的不同类型的属性时，这不是您想要的。

标签： javascript reactjs typescript

【解决方案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 出了点问题，以至于没有拾取打字？