React报错之Type '() => JSX.Element[]' is not assignable
正文从这开始~
总览
当我们尝试从函数组件中返回元素组成的数组时,会产生"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"错误。为了解决该错误,可以将元素数组包裹在React片段中。
jsx-element-not-assignable-type-functioncomponent.png
这里有个示例用来展示错误是如何发生的。
// 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[3])中。
// 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
将元素数组进行包裹。
参考资料
[1]
https://bobbyhadz.com/blog/react-type-jsx-element-not-assignable-type-functioncomponent: https://bobbyhadz.com/blog/react-type-jsx-element-not-assignable-type-functioncomponent
[2]
Borislav Hadzhiev: https://bobbyhadz.com/about
[3]
React fragment: https://reactjs.org/docs/fragments.html#gatsby-focus-wrapper
相关文章
- react中的diff算法,通俗易懂的解读
- React saga_react获取子组件ref
- React报错之Property 'X' does not exist on type 'HTMLElement'
- React报错之Objects are not valid as a React child
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- React Error: Failed at the xxx@0.1.0 start script 'react-scripts start'.
- React组件生命周期
- react源码分析--深度理解React.Context
- React脚手架配置代理解决跨域问题
- 在React中使用 react-router-dom 编程式路由导航【含V5.x、V6.x】
- 深入react源码看setState究竟做了什么?
- react源码解析19.手写迷你版react5
- React--11: refs与事件处理非受控组件和受控组件
- react源码分析:深度理解React.Context_2023-02-07
- 坚实的 React 基础:初学者指南