3

我正在查看.tsx如下所示的代码。

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

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

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

所以，我的问题是如何在ReactFragment这里工作？
只是为了表明这一点children还是commandBar属于一种React.Fragment类型？

在那种情况下，为什么不使用React.Fragment它自己呢？谷歌搜索React.Fragment只抛出结果。

4

3 回答 3

2

只是为了表明这一点children还是commandBar属于一种React.Fragment类型？

是的。

在那种情况下，为什么不使用React.Fragment它自己呢？

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

'Fragment' refers to a value, but is being used as a type here.
于 2020-08-10T09:02:58.337 回答
1

请参阅下面的屏幕截图。

在此处输入图像描述

ReactFragment是ReactNode实习生可以使用的有效值之一，Array<ReactNode>因此您可以作为ReactFragmentie<></>或<React.Fragment></React.Fragment>您的组件获得有效返回。

import React, { ReactFragment } from 'react';

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

在这里，我们专门将类型定义为 a ReactFragment。即使您返回boolean, null, undefined, ReactChild，ReactFragment它也会随着它的扩展而接受Array<ReactNode>。

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

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

于 2020-08-10T08:50:14.430 回答
1

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

于 2020-08-10T08:57:21.923 回答