我目前正在将 React 应用程序迁移到 TypeScript。到目前为止，这工作得很好，但是我的render函数的返回类型有问题，特别是在我的函数组件中。
我一直用作JSX.Element返回类型，现在如果组件决定不呈现任何内容，即返回null，这将不再起作用，因为null它不是 的有效值JSX.Element。这是我旅程的开始。我在网上搜索，发现你应该ReactNode改用它，其中包括null一些其他可能发生的事情。
但是，在创建功能组件时，TypeScript 会抱怨ReactNode类型。再次，经过一些搜索，我发现，对于功能组件，您应该使用它ReactElement。但是，如果我这样做，兼容性问题就消失了，但现在 TypeScript 再次抱怨null不是有效值。
长话短说，我有三个问题：
JSX.Element，ReactNode和ReactElement？render类组件的方法返回ReactNode，而功能组件返回ReactElement？null？JSX.Element、ReactNode 和 ReactElement 之间有什么区别？
ReactElement 是一个具有类型和props的对象。
type Key = string | number
interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
type: T;
props: P;
key: Key | null;
}
一个 ReactNode 是一个 ReactElement、一个 ReactFragment、一个字符串、一个数字或一个 ReactNode 数组，或者 null，或者 undefined，或者一个布尔值：
type ReactText = string | number;
type ReactChild = ReactElement | ReactText;
interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
JSX.Element 是一个 ReactElement，props 和 type 的泛型类型是 any。它存在，因为各种库可以以自己的方式实现 JSX，因此 JSX 是一个全局命名空间，然后由库设置，React 将其设置为：
declare global {
namespace JSX {
interface Element extends React.ReactElement<any, any> { }
}
}
举例：
<p> // <- ReactElement = JSX.Element
<Custom> // <- ReactElement = JSX.Element
{true && "test"} // <- ReactNode
</Custom>
</p>
为什么类组件的render方法返回ReactNode，而函数组件返回ReactElement？
事实上，它们确实返回了不同的东西。Component返回：
render(): ReactNode;
函数是“无状态组件”：
interface StatelessComponent<P = {}> {
(props: P & { children?: ReactNode }, context?: any): ReactElement | null;
// ... doesn't matter
}
这其实是有历史原因的。
我如何解决这个关于 null 的问题？
键入它ReactElement | null一样不作出react。或者让 Typescript 推断类型。
1.) JSX.Element、ReactNode 和 ReactElement 有什么区别？
ReactElement 和 JSX.Element
是React.createElement直接调用或通过 JSX 转译调用的结果。它是一个带有type,props和的对象key。JSX.Elementis ReactElement, whichprops和typehave type any，所以它们或多或少是一样的。
const jsx = <div>hello</div>
const ele = React.createElement("div", null, "hello");
ReactNode用作render()类组件的返回类型。它也是children属性的默认类型PropsWithChildren。
const Comp: FunctionComponent = props => <div>{props.children}</div>
// children?: React.ReactNode
它在React 类型声明中看起来更复杂，但等效于：
type ReactNode = {} | null | undefined;
// super type `{}` has absorbed *all* other types, which are sub types of `{}`
// so it is a very "broad" type (I don't want to say useless...)
您几乎可以将所有内容分配给ReactNode. 我通常更喜欢更强的类型，但可能有一些有效的情况可以使用它。
2.) 为什么类组件的render方法返回ReactNode，而函数组件返回ReactElement？
tl;dr：这是与核心 React 无关的当前 TS 类型不兼容。
TS类组件：返回ReactNode与render()比阵营/ JS更宽容
TS 函数组件：返回JSX.Element | null，比 React/JS 限制更多
原则上，render()React/JS 类组件支持与函数组件相同的返回类型。对于TS，不同类型是由于历史原因和向后兼容的需要仍然保持的类型不一致。
理想情况下，有效的返回类型可能看起来更像这样：
type ComponentReturnType = ReactElement | Array<ComponentReturnType> | string | number
| boolean | null // Note: undefined is invalid
一些选项：3.) 我该如何解决 null 的问题？
// Use type inference; inferred return type is `JSX.Element | null`
const MyComp1 = ({ condition }: { condition: boolean }) =>
condition ? <div>Hello</div> : null
// Use explicit function return types; Add `null`, if needed
const MyComp2 = (): JSX.Element => <div>Hello</div>;
const MyComp3 = (): React.ReactElement => <div>Hello</div>;
// Option 3 is equivalent to 2 + we don't need to use a global (JSX namespace)
// Use built-in `FunctionComponent` or `FC` type
const MyComp4: React.FC<MyProps> = () => <div>Hello</div>;
注意：避免React.FC 不会使您免于JSX.Element | null返回类型限制。
Create React App 最近从其模板中删除React.FC，因为它有一些像隐式{children?: ReactNode}类型定义这样的怪癖。因此，React.FC谨慎使用可能更可取。
const MyCompFragment: FunctionComponent = () => <>"Hello"</>
const MyCompCast: FunctionComponent = () => "Hello" as any
// alternative to `as any`: `as unknown as JSX.Element | null`