如何限制React组件的子元素为特定类型<T>？

JSX.Element确实不是泛型，你示例里的写法没法生效。要实现限制子元素为特定类型的需求，可以用以下几种方式：

方案1：用React.ReactElement泛型约束类型 #

React提供了React.ReactElement泛型，它可以接收组件的Props类型，直接用来定义children的类型：

// 先定义子组件的Props类型
interface IMyComponentChild {
  text: string;
}

// 子组件实现
const MyComponentChild = (props: IMyComponentChild) => {
  return <div>{props.text}</div>;
};

// 父组件的Props接口，用React.ReactElement约束children
interface IProps {
  // 支持单个或多个子元素
  children: React.ReactElement<IMyComponentChild> | React.ReactElement<IMyComponentChild>[];
}

const MyComponent = (props: IProps) => {
  return <div>{props.children}</div>;
};

这样当你传入非MyComponentChild的元素时，TypeScript会直接在编译阶段报错。

方案2：结合类型守卫做运行时+编译时双重校验 #

如果需要更灵活的子元素处理（比如允许嵌套结构，但确保最终渲染的是指定组件），可以自定义类型守卫，同时做运行时校验：

import React from 'react';

interface IMyComponentChild {
  text: string;
}

const MyComponentChild = (props: IMyComponentChild) => {
  return <div>{props.text}</div>;
};

// 类型守卫函数，判断元素是否为目标组件
const isMyComponentChild = (element: React.ReactElement): element is React.ReactElement<IMyComponentChild> => {
  return element.type === MyComponentChild;
};

interface IProps {
  children: React.ReactElement[];
}

const MyComponent = (props: IProps) => {
  // 运行时校验，防止绕过TypeScript的情况
  props.children.forEach(child => {
    if (!isMyComponentChild(child)) {
      throw new Error('MyComponent的子元素必须是MyComponentChild组件');
    }
  });

  return <div>{props.children}</div>;
};

备选方案：改用插槽模式 #

如果不需要通过children传递，也可以直接通过props传子组件，这种方式类型约束更明确，也避免了children嵌套带来的类型判断问题：

interface IProps {
  // 直接指定单个子组件的类型
  child: React.ReactElement<IMyComponentChild>;
  // 或者数组形式
  // children: React.ReactElement<IMyComponentChild>[];
}

const MyComponent = (props: IProps) => {
  return <div>{props.child}</div>;
};

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