“react”中的 ReactFragment 是什么意思？答案

【问题标题】：What does a ReactFragment from "react" mean?“react”中的 ReactFragment 是什么意思？
【发布时间】：2020-11-29 20:20:26
【问题描述】：

我正在查看类似于下面的 .tsx 代码。

import React, { Fragment, ReactFragment } from "react";

// ...
export interface PageProps {
   children: ReactFragment;
   commandBar: reactFragment;
   // ...
}
    
export default page(props: PageProps) {
   return(
      <Fragment>
        // ...
      </Fragment>
   );
}

我大致知道React.Fragment 是什么。
我们可以根据导入糖化使用<></> 或<React.Fragment></React.Fragment> 或<Fragment></Fragment> 对反应元素进行分组。

那么，我的问题是ReactFragment 在这里是如何工作的？
只是表明children 或commandBar 属于React.Fragment 类型？

既然如此，为什么不使用React.Fragment 本身呢？谷歌搜索只为React.Fragment 抛出结果。

【问题讨论】：

我还没有从“react”中找到 ReactFragment。 github.com/facebook/react/tree/master/packages/react/src
@spycbanda 因为它不是 React 的一部分。 github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/…

标签： reactjs typescript react-fragment

【解决方案1】：

是否只是表明children 或commandBar 属于React.Fragment 类型？

是的。

既然如此，为什么不使用React.Fragment 本身呢？

React.Fragment 不是类型而是值。如果你使用它，你会看到这样的编译错误：

'Fragment' refers to a value, but is being used as a type here.

【讨论】：

【解决方案2】：

请看下面的截图。

ReactFragment 是 ReactNode 的有效值之一，其中实习生可以是 Array<ReactNode>，因此您可以将有效返回为 ReactFragment，即您的组件的 <></> 或 <React.Fragment></React.Fragment>。

import React, { ReactFragment } from 'react';

function MyComp(): ReactFragment {
    //it can return any of boolean, null, undefined, ReactChild, ReactFragment
    return (
        <></> 
    )
}

这里我们专门将类型定义为ReactFragment。即使您返回boolean、null、undefined、ReactChild、ReactFragment，它也会接受，因为它扩展了Array<ReactNode>。

简而言之，ReactFragment 是一个组件可以返回的类型。

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L238

【讨论】：

问题是关于 ReactFragment 而不是 React.Fragment。清楚地阅读问题。
谢谢！但这就是 React.Fragment 的全部内容，我已经提到我知道这个概念。我如何将您的 anwser 与 ReactFragment 联系起来？

【解决方案3】：

ReactFragment 是一种类型（例如，ReactNode 也可以是 ReactFragment），其中 Fragment 是 react 中的模式，可让您返回分组的子级。

【讨论】：