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的资料请关注脚本之家其它相关文章!
相关文章
React Hooks - useContetx和useReducer的使用实例详解
这篇文章主要介绍了React Hooks - useContetx和useReducer的基本使用,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11react hook使用useState更新数组,无法更新问题及解决
这篇文章主要介绍了react hook使用useState更新数组,无法更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03React中使用Echarts无法显示title、tooltip等组件的解决方案
这篇文章主要介绍了React中使用Echarts无法显示title、tooltip等组件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03详解关于react-redux中的connect用法介绍及原理解析
本篇文章主要介绍了详解关于react-redux中的connect用法介绍及原理解析,非常具有实用价值,需要的朋友可以参考下2017-09-09详解React Native开源时间日期选择器组件(react-native-datetime)
本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下2017-09-09
最新评论