Какими будут типы Typescript для компонентов React, которые могут возвращать строку или напрямую своих дочерних элементов

Question

Какие типы будут правильными для компонента React, который также может возвращать string или напрямую их children, кроме JSX.Element? например:

type PropsStringExample = Readonly<{
  returnString: boolean;
}>;

type PropsChildrenExample = Readonly<{
  children: React.ReactNode;
  returnChildren: boolean;
}>;

/*
  Fails with: Type '{} | null | undefined' is not assignable to type 'ReactElement<any, any> | null'.
  Type 'undefined' is not assignable to type 'ReactElement<any, any> | null'.
*/
const ComponentReturnsChildren: React.FunctionComponent<PropsChildrenExample> = ({
  children,
  returnChildren
}: PropsChildrenExample) => {
  if (returnChildren) {
    return children;
  }

  return (
    <>
      <div>Just a wrapper around the children</div>
      {children}
    </>
  );
};

/*
  Fails with:  Type '"This component returns a string"' is not assignable to type 'ReactElement<any, any> | null'.
*/
const ComponentReturnsString: React.FunctionComponent<PropsStringExample> = ({
  returnString
}: PropsStringExample) => {
  if (returnString) {
    return "This component returns a string";
  }

  return <div>Or also some dumb div</div>;
};

Обертывание возвращаемой строки фрагментом в последнем примере невозможно из-за некоторых ограничений eslint, т.е. <>"string"</>

CodeSandbox с примером ошибок: https://codesandbox.io/s/type-component-return-children-or-string-b956g?file= / src / index.tsx

Answer 1

A React.FunctionComponent должен возвращать элемент JSX. Строка не соответствует этому описанию и должна быть обернута в JSX, чтобы быть действительной. Вы можете изменить тип с React.FunctionComponent на JSX.element | string (или что-то подобное), но тогда в вашем потребляющем компоненте вам придется условно обернуть его в JSX.element или использовать JSX element, который имеет смысл содержать либо голая строка или JSX.Element. Я мог бы предложить вам пересмотреть свой подход здесь или использовать <span> вместо <> фрагмента.