? 优质资源分享 ?
| 学习路线指引（点击解锁） | 知识定位 | 人群定位 |
|---|---|---|
| ? Python实战微信订餐小程序 ? | 进阶级 | 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 |
| ?Python量化交易实战? | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
正文从这开始~
总览
当我们尝试从函数组件中返回元素组成的数组时，会产生"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"错误。为了解决该错误，可以将元素数组包裹在React片段中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8nSTl4d-1660669695281)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c087d1cc17d24648859d6a497b37c358~tplv-k3u1fbpfcp-watermark.image?)]
这里有个示例用来展示错误是如何发生的。
// 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': 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