类型 '(props: Props) => Element\[\]' 不可分配给类型 'FunctionComponent<Props>'

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) => {
       |       ^

我阅读了 如何在 typescript 中声明对象数组的答案？ ，但仍然无法弄清楚如何解决它。

原文由 Hongbo Miao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React 组件不能呈现（或返回功能组件）为数组，这是您目前所拥有的。您可以更新代码以返回 — 中的 React.Fragment a 标签，这基本上是您所追求的，但被允许。

例子：

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

另请注意，您可以使用语法

<>
  { websiteElements }
</>

而不是 <React.Fragment> 如果你愿意的话。

原文由 Henry Woody 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>
    ))}
  </>
);

原文由 Asaf Aviv 发布，翻译遵循 CC BY-SA 4.0 许可协议