Question

我正在尝试在React应用中添加TypeScript。

版本：

"react": "16.9.0",
"typescript": "3.5.3",

我有一个像这样的数组

import aLogo from '../images/a.svg';
import bLogo from '../images/b.svg';

const websites = [
  {
    name: 'A',
    src: aLogo,
    url: 'https://a.com',
  },
  {
    name: 'B',
    src: bLogo,
    url: 'https://b.com',
  },
];

我正在通过道具将其传递给组件。

interface Website {
  name: string;
  src: string;
  url: string;
}

interface Props {
  websites: Website[];
}

const SocialList: React.FC<Props> = (props: Props) => {
  const { websites } = props;

  return websites.map((website) => {
    const { name, src, url } = website;

    return (
      <a key={name} href={url}>
        <img src={src} />
      </a>
    );
  });
};

但这给了我错误

TypeScript error in /SocialList.tsx(16,7):
Type '(props: Props) => Element[]' is not assignable to type 'FunctionComponent<Props>'.
  Type 'Element[]' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>': type, props, key  TS2322

    14 | }
    15 | 
  > 16 | const SocialList: React.FC<Props> = (props: Props) => {
       |       ^

我阅读了how do you declare an array of objects inside typescript?中的答案，但仍然不知道如何解决它。

Answer 1

反应组件无法呈现为数组（或为功能组件返回），这就是当前的情况。您可以更新代码以在a内返回React.Fragment标记，这基本上是您想要的，但可以使用。

示例：

const SocialList: React.FC<Props> = (props: Props) => {
  const { websites } = props;

  const websiteElements = websites.map((website) => {
    const { name, src, url } = website;

    return (
      <a key={name} href={url}>
        <img src={src} />
      </a>
    );
  });

  return (
    <React.Fragment>
      { websiteElements }
    </React.Fragment>
  )
};

Answer 2

错误是关于从组件返回不是有效返回类型的JSX元素数组。

您必须返回一个节点，所有要做的就是将其包装在片段<></>或<div></div>等中……

您也无需再次输入props参数

const SocialList: React.FC<Props> = ({ websites }) => (
  <>
    {websites.map(({ name, src, url }) => (
      <a key={name} href={url}>
        <img src={src} />
      </a>
    ))}
  </>
);

Answer 3

此处接受的答案不正确，因为您收到此错误的原因。从 React v16 开始，React 组件可以返回包含 React 元素的数组。你不必返回一个片段。

这是 react types 包的问题，更具体地说是 TS 本身的问题。

source 1 source 2

作为一种解决方法，您可以取消此错误消息，因为它本身是错误的，或者实际上返回一个 Fragment

Answer 4

JSX元素数组不是有效的返回类型吗？整个对话看起来很奇怪，因为2017年随着React @ 16的发布增加了从render返回数组的功能。

T'令人失望，找到了这个，而不是真正的解决方案。

猜想反应类型在React @ 16之后才更新。在我的代码中，我必须像这样修复它：

type AdvFC<P> = (...args: Parameters<React.FC<P>>) => ReturnType<React.FC<P>> | ReturnType<React.FC<P>>[];

然后您可以按以下方式使用它：

const SocialList: React.AdvFC<Props> = (props: Props) => ...

到目前为止，还不知道是否会带来一些副作用。

类型'（props：Props）=> Element []'不可分配给'FunctionComponent <Props>'类型

4 个答案: