来自 "react" 的 ReactFragment 是什么意思？

Question

我正在查看 .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 的结果。

Answer 1

请看下面的截图。

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

import React, { ReactFragment } from 'react';

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

这里我们特意定义类型为aReactFragment。即使你 return boolean, null, undefined, ReactChild, ReactFragment 它也会接受扩展 Array<ReactNode>.

简而言之ReactFragment是一个组件可以return.

的类型

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

Answer 2

ReactFragment 是一种类型（例如 ReactNode 也可以是 ReactFragment），其中 Fragment 是 react 中的模式，可以让您 return分组儿童。

Answer 3

Is it just to indicate that children or commandBar is of a React.Fragment type?

是的。

In that case, why not use React.Fragment itself?

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

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

来自 "react" 的 ReactFragment 是什么意思？

What does a ReactFragment from "react" mean?

typescript

reactjs

react-fragment