如何在React/TypeScript中限定函数组件A的子组件仅为B和C？

要实现这个需求，核心是通过TypeScript的类型系统约束组件A的children属性，只允许B和C组件作为子元素，同时可配合运行时校验增强安全性。具体实现如下：

1. 给B、C组件添加专属标识 #

先给B和C组件定义明确的类型标记，让TypeScript能识别它们的独特性，这里用displayName作为标识：

import React from 'react';

const B = () => <div>Component B</div>;
B.displayName = 'BComponent'; // 专属类型标识

const C = () => <div>Component C</div>;
C.displayName = 'CComponent'; // 专属类型标识

2. 定义组件A的Props类型约束 #

通过React.ReactElement类型，限定A的children只能是B或C的React元素，支持单个或多个子组件：

// 定义允许的子元素类型
type AllowedChild = React.ReactElement<typeof B> | React.ReactElement<typeof C>;

// 组件A的Props类型
type AProps = {
  children: AllowedChild | AllowedChild[];
};

// 实现组件A
const A = ({ children }: AProps) => {
  return <div className="a-wrapper">{children}</div>;
};

3. 验证类型约束效果 #

现在TypeScript会在编译阶段直接拦截非法的子组件：

// ✅ 合法用法，无类型错误
<A>
  <B />
  <C />
</A>

// ❌ 编译报错：类型不兼容，不能传入普通div或其他组件
<A>
  <B />
  <div>非法子组件</div>
</A>

可选：添加运行时校验 #

如果担心有绕过TypeScript类型的情况（比如动态生成组件），可以在组件A内部加入运行时校验：

const A = ({ children }: AProps) => {
  // 遍历子元素做校验
  React.Children.forEach(children, (child) => {
    if (React.isValidElement(child)) {
      const allowedNames = ['BComponent', 'CComponent'];
      if (!allowedNames.includes(child.type.displayName || '')) {
        console.error(`组件A仅支持B和C作为子组件，当前传入：${child.type.displayName}`);
      }
    }
  });

  return <div className="a-wrapper">{children}</div>;
};

这样既能在开发阶段通过TypeScript提前发现错误，又能在运行时做兜底校验，确保组件的使用符合预期。

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