Reactjs 类型'；（道具：道具）=>；元素[]和#x27；不可分配给类型'；功能组件<；道具>'；

我正在尝试在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>
    );
  });
};

接口网站{
名称：字符串；
src：字符串；
url:string；
}
界面道具{
网站:网址【】;；
}
const SocialList:React.FC=（道具：道具）=>{
const{websites}=props；
返回网站。地图（（网站）=>{
const{name，src，url}=网站；
返回(
);
});
};

但它给了我错误

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

/SocialList.tsx中的类型脚本错误（16,7）： 类型“（props:props）=>Element[]”不可分配给类型“FunctionComponent”。

---

类型“Element[]”缺少类型“ReactElement”中的以下属性，但仍然无法确定如何修复它。

ReactComponents无法以数组形式呈现（或返回功能组件），这是您当前拥有的。您可以更新代码，以返回

React.Fragment

中的

a

标记，这基本上就是您想要的，但是允许的

例如：

const SocialList:React.FC=（道具：道具）=>{
const{websites}=props；
const websiteElements=websites.map（（网站）=>{
const{name，src，url}=网站；
返回(
);
});
返回(
{websiteElements}
)
};

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

{websiteElements}

---

如果愿意，请不要使用

。

错误是关于从组件返回一个无效返回类型的JSX元素数组

您必须返回单个节点，只需将其包装在片段

或

等中

此外，您不需要再次键入

props

参数

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

const SocialList:React.FC=（{websites}）=>(
{websites.map（{name，src，url}）=>(
))}
);

JSX元素数组如何不是有效的返回类型？整个对话看起来很奇怪，因为从render返回数组是在2017年发布的React@16.

这是相当令人失望的，发现这不是一个真正的解决办法

我猜react键入在之后没有更新React@16. 在我的代码中，我必须这样修复它：

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

typeadvfc
=（…参数：参数）=>ReturnType | ReturnType[]；

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

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

const SocialList:React.AdvFC=（props:props）=>。。。

---

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

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

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

---

作为一种解决方法，您可以抑制此错误消息，因为它本身是错误的，或者返回一个片段

数组

@zynknk刚刚尝试将

网站[]

更改为

数组

，但仍然收到相同的错误。您从

SockailList

返回什么？您是否执行类似于返回网站的操作。map（…）？@asafavi是的，刚刚添加在问题中。

const-websites:Array=[…]

两者都是正确的。亨利先回答。我会接受他的。再次感谢！在React文档中，它指出，即使您想要返回一个组件数组，也应该将其包装在一个片段中。有关更多详细信息，请参阅有关片段的文档：感谢您的修复。这节省了我很多时间