React数组组件不使用Fragment时如何解决React.FC类型报错

日常开发中通常使用React.FC<Props>作为React函数组件的类型标注，参考如下组件示例：

const MyComponent = ({myArray}) => {
    return myArray.map(
        (item, index) => <span key={index} className='foo'>{item}</span>
    );
}

已知使用Fragment包裹组件返回值时，可以正常匹配React.FC<Props>的类型约束；如果不使用Fragment包裹，可通过以下方案避免出现Initializer type ({myArray}: {myArray: any}) => any is not assignable to variable type React.FC<Props>类型错误。

旧版本@types/react中，React.FC默认约束函数返回值为单个ReactElement类型（即单根JSX节点），上述示例直接返回Array.map生成的React元素数组，和React.FC的默认返回值类型不匹配，因此触发类型报错。

• 显式标注组件返回值类型，覆盖默认类型约束
  直接在函数参数后声明返回值为React.ReactElement[]，无需使用React.FC包裹类型，示例代码如下：

  // 先定义组件入参类型，可根据实际业务调整myArray的成员类型
  type Props = {
    myArray: (string | number)[]
  }
  const MyComponent = ({myArray}: Props): React.ReactElement[] => {
      return myArray.map(
          (item, index) => <span key={index} className='foo'>{item}</span>
      );
  }
  

• 自定义适配数组返回值的函数组件类型，替代原生React.FC
  在全局类型声明文件中定义支持数组返回的通用组件类型，后续可在所有返回数组的组件中复用：

  // 全局类型定义
  type ArrayReturnFC<P = Record<string, unknown>> = (props: P) => React.ReactElement[];
  
  // 组件使用
  type Props = {
    myArray: (string | number)[]
  }
  const MyComponent: ArrayReturnFC<Props> = ({myArray}) => {
      return myArray.map(
          (item, index) => <span key={index} className='foo'>{item}</span>
      );
  }
  

• 升级React及对应类型包到React 18+版本
  React 18对应的官方类型定义已经放宽了函数组件的返回值约束，原生支持返回数组、字符串、布尔值、null等多种合法React渲染值，升级到最新稳定版的react、react-dom和@types/react、@types/react-dom后，直接使用React.FC<Props>标注上述组件也不会触发类型错误。

内容的提问来源于stack exchange，提问作者A.A