Что означает ReactFragment от "react"?

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

Просто чтобы указать, что children или commandBar из React.Fragment тип?

Да.

В таком случае почему бы не использовать React.Fragment сам?

React.Fragmentэто не тип, а значение. Если вы его использовали, вы увидите такую ​​ошибку компиляции:

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

Answer 2

ReactFragment это тип (например, ReactNode также может быть ReactFragment) где Fragment это образец в react это позволяет вам возвращать сгруппированных детей.

Answer 3

Смотрите скриншот ниже.

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