何时使用JSX.Element vs ReactNode vs ReactElement？ – 开发百科-程序代码问答平台

我目前正在将React应用程序迁移到TypeScript。到目前为止，这工作得很好，但是我的render函数的返回类型有问题，特别是在我的函数组件中

我一直使用JSX.Element作为返回类型，现在，如果组件决定不呈现任何内容，即返回null，则这不再有效，因为null不是JSX.Element的有效值。这是我旅程的开始。我在网上搜索了一下，发现应该改用ReactNode，其中包括null和其他一些可能发生的事情

但是，在创建功能组件时，TypeScript会抱怨ReactNode类型。同样，经过一些搜索，我发现，对于功能组件，应该使用ReactElement。但是，如果我这样做，兼容性问题就消失了，但是现在TypeScript再次抱怨null不是有效值

长话短说，我有三个问题：

JSX.Element、ReactNode和ReactElement之间有什么区别
为什么类组件的render方法返回ReactNode，而功能组件返回ReactElement
对于null，如何解决此问题

元素、ReactNode和ReactElement之间的区别是什么

ReactElement是具有类型和道具的对象

类型键=字符串|编号
界面元素&lt；P=any，T扩展字符串| JSXElementConstructor&lt；任何&gt；=字符串| JSXElementConstructor&lt；任何&gt&燃气轮机；{
类型：T；
道具：P；
key:key | null；
}

ReactNode是ReactElement、ReactFragment、字符串、数字或ReactNodes数组，或null、未定义或布尔值：

类型：文本=字符串|编号；
类型ReactChild=ReactElement | ReactText；
接口ReactNodeArray扩展阵列&lt；反应节点&gt；{}
类型ReactFragment={}| ReactNodeArray；
类型ReactNode=ReactChild | ReactFragment | ReactPortal | boolean | null |未定义；

Element是一个ReactElement，props的泛型类型是any。它是存在的，因为各种库可以以自己的方式实现JSX，因此JSX是一个全局名称空间，然后由库设置，反应如下：

声明全局{
名称空间JSX{
接口元素扩展了React.ReactElement&lt；any，any&gt；{}
}
}

举例来说：

&lt；p&gt；/&lt；-ReactElement=JSX.Element
&lt；定制&gt；//&lt；-ReactElement=JSX.Element
{正确的测试}/&lt；-反应节点
&lt/定制&gt；
&lt/p&gt；

为什么类组件的呈现方法返回ReactNode，而函数组件返回ReactElement

事实上，它们确实返回了不同的东西组件s返回：

render（）：ReactNode；

和功能是；“无状态组件”：

接口组件&lt；P={}&gt；{
（props:P&amp；{children？：ReactNode}，context？：any）：ReactElement | null；
//…没关系
}

这实际上是历史原因造成的

关于null，我如何解决这个问题

将其输入为ReactElement | null，就像react一样。或者让Typescript推断类型

_{类型的来源}

相关文章：

发表评论 取消回复

发表评论取消回复