react 指定props.children为某个组件

Question

react怎样可以限制传入的children为指定的组件类型？
Typescript

type AProps = {
    //children?:ReactElement
}
const A:React.FC<AProps>=(props)=>{
    return (
        <div>
            这里传入的children只能是B或者C，不能传入B或C以外的类型
            {props.children}
        </div>
    )
}

type BProps = {}
const B:React.FC<BProps>=(props)=>(
    <div>B组件</div>
)

type CProps = {}
const C:React.FC<CProps>=(props)=>(
    <div>C组件</div>
)


function Demo(){
    return (
        <A>
            <B/>
        </A>
    )
}

Answer 1

type AProps = {
  children?: ReturnType<typeof B | typeof C>
};
const A: React.FC<AProps> = (props) => {
  return <div>{props.children}</div>;
};

type BProps = {};
const B: React.FC<BProps> = (props) => <div>B组件</div>;

type CProps = {};
const C: React.FC<CProps> = (props) => <div>C组件</div>;

type DProps = {
  a: string;
};
const D: React.FC<DProps> = (props) => <div>D组件</div>;

function Demo() {
  return (
    <A>
      <D />
    </A>
  );
}

ReturnType<> 由函数类型得到返回值类型
https://www.typescriptlang.or...

Answer 2

react的createElement函数只会保留function component的props类型，我认为应该没法在ts编译时进行类型判断来保证children的类型
但可以在运行时判断
以下代码在react17凑合用起来应该没问题

type AProps = {
    //children?:ReactElement
}
const A:React.FC<AProps>=(props)=>{
    if(Array.isArray(props.children)) && props.children.some(child=>![B,C].includes(child.type))){
        throw new Error('component A only accept children created of  component B/C');
    }
    if(props.children && ![B,C].includes(props.children.type)){
        throw new Error('component A only accept children created of component B/C');
    }
    return (
        <div>
            这里传入的children只能是B或者C，不能传入B或C以外的类型
            {props.children}
        </div>
    )
}