React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent
总览
当我们尝试从函数组件中返回元素组成的数组时，会产生"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"错误。为了解决该错误，可以将元素数组包裹在React片段中。
这里有个示例用来展示错误是如何发生的。
// App.tsx
import React from 'react';
// ⛔️ Type '() => JSX.Element[]' is not assignable to type 'FunctionComponent<{}>'.
// Type 'Element[]' is missing the following properties
// from type 'ReactElement<any, any>': type, props, key ts(2322)
const App: React.FunctionComponent = () => {
return ['Alice', 'Bob'].map(element => <div key={element}>{element}</div>);
};
export default App;
这是完全有效的React.js代码，因为我们能够从React的函数组件中返回一个数组。然而，FunctionComponent接口的返回类型是ReactElement或null。
这也就意味着，我们可以只返回一个React元素或者null值。
React片段
为了解决该类型错误，我们必须将数组包裹在React片段（React fragment）中。
// App.tsx
import React from 'react';
const App: React.FunctionComponent = () => {
return (
<>
{['Alice', 'Bob'].map(element => (
<div key={element}>{element}</div>
))}
</>
);
};
export default App;
当我们需要对一个元素列表进行分组而不向DOM添加额外的节点时，就会用到片段。
React.Fragment
你可能还会看到使用了更加详细的片段语法。
// App.tsx
import React from 'react';
const App: React.FunctionComponent = () => {
return (
<React.Fragment>
{['Alice', 'Bob'].map(element => (
<div key={element}>{element}</div>
))}
</React.Fragment>
);
};
export default App;
上面的两个例子达到了相同的结果--它们对元素列表的元素进行分组，而没有给DOM添加额外的节点。
div
另一个解决方案是将元素数组包裹在另一个DOM元素中，例如一个div。
// App.tsx
import React from 'react';
const App: React.FunctionComponent = () => {
return (
<div>
{['Alice', 'Bob'].map(element => (
<div key={element}>{element}</div>
))}
</div>
);
};
export default App;
这仍然符合FunctionComponent接口中指定的返回类型，因为我们的组件返回的是一个单一的React元素。
总结
为了解决"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"错误，可以使用React片段或者div将元素数组进行包裹。
以上就是React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent的详细内容，更多关于React报错FunctionComponent的资料请关注脚本之家其它相关文章！
相关文章
最近看了vueuse的useVirtualList的实现方式,发现虚拟滚动效果不错,就尝试着同样的写法改成react版本,虚拟列表主要包含三部分组成,offset,viewcapacity,overscan,本文就给大家介绍一下React虚拟列表的实现,需要的朋友可以参考下2023-08-08
详解关于react-redux中的connect用法介绍及原理解析
本篇文章主要介绍了详解关于react-redux中的connect用法介绍及原理解析，非常具有实用价值，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了react使用节流函数防止重复点击问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了React 如何拿时间戳计算得到开始和结束时间戳,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
React useContext与useReducer函数组件使用
useContext和useReducer 可以用来减少层级使用, useContext，可以理解为供货商提供一个公共的共享值，然后下面的消费者去接受共享值，只有一个供货商，而有多个消费者，可以达到共享的状态改变的目的2023-02-02
ahooks封装cookie localStorage sessionStorage方法
这篇文章主要为大家介绍了ahooks封装cookie localStorage sessionStorage的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
合成事件不是浏览器本身触发的事件，自己创建和触发的事件。本文将从源码角度带大家一起深入了解下React中的合成事件，需要的可以参考一下2022-11-11
React Native可定制底板组件Magic Sheet使用示例
这篇文章主要为大家介绍了React Native可定制的底板组件Magic Sheet使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了react.js组件实现拖拽复制和可排序的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
React Fragment 和空标签(＜＞＜/＞)用法及区别详解
本文详细介绍了React中的Fragment和空标签的使用,包括它们的区别、使用场景、性能考虑以及最佳实践,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2025-01-01
最新评论