React组件库如何限制父组件仅接受指定子组件（支持泛型）

要实现父组件仅接受特定子组件的需求，我们可以通过TypeScript的泛型和类型约束在编译期完成校验，具体实现步骤如下：

1. 定义允许的组件类型集合 #

首先明确需要允许的子组件（CurrencyInput 和 TextInput），通过typeof获取它们的构造函数类型，组合成一个联合类型：

import React from 'react';

// 示例子组件（替换为你实际的组件实现）
const CurrencyInput = () => <input type="number" />;
const TextInput = () => <input type="text" />;

// 定义仅允许的组件类型联合
type AllowedInputComponents = typeof CurrencyInput | typeof TextInput;

2. 用泛型约束父组件Props #

通过泛型T约束其只能是允许的组件类型，再将children的类型限定为这些组件的ReactElement实例（支持单个或多个子组件）：

// 父组件Props类型，泛型T约束为允许的组件类型
type InputWrapperProps<T extends AllowedInputComponents> = {
  children: React.ReactElement<T> | React.ReactElement<T>[];
};

// 实现父组件，应用泛型约束
export default function InputWrapperComponent<T extends AllowedInputComponents>({ children }: InputWrapperProps<T>) {
  return <div className="input-wrapper">{children}</div>;
}

3. 校验效果 #

此时TypeScript会自动在编译期检查子组件的合法性：

合法用法 #

// 符合约束，无编译错误
<InputWrapperComponent>
  <CurrencyInput />
  <TextInput />
</InputWrapperComponent>

非法用法 #

// 传入非允许组件，TypeScript直接抛出编译错误
<InputWrapperComponent>
  <div>非法子组件</div>
</InputWrapperComponent>

扩展说明 #

• 泛型的优势：如果后续需要基于子组件的具体类型做逻辑处理（比如读取子组件的Props类型），泛型T可以保留子组件的类型信息，便于扩展：

  // 获取CurrencyInput组件的Props类型
  type CurrencyInputProps = React.ComponentProps<typeof CurrencyInput>;
  

• 若需支持嵌套Fragment等灵活结构，可调整children类型为React.ReactElement<T> | React.ReactElement<T>[] | React.Fragment，但会略微降低校验严格性。

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