Reactjs 如何在类型检查道具时指定子级的长度？

我希望我的组件只接受类型为

React.ReactChild

的3个子组件。但是我不确定

ReactChild

是否是最好的检查类型。基本上有三个

部分

function TopBox({ children }: Props) {
  return (
    <Container>
      {children}
    </Container>
  );
}

---

重要的属性是元组中的

length

。我们可以使用数组和

{length:3}

类型之间的交集来模拟特定长度的元组。这不完全是一个元组，但就长度而言，它可以完成这项工作

type ReactChildrenOfLength<T extends number> = [] | (React.ReactChild[] & { length: T })
interface Props {
    children: ReactChildrenOfLength<3>
}

function TopBox({ children }: Props) {
    return (
    <div>
        {children}
    </div>
    );
}

let d = <TopBox>
    <div></div>
    <div></div>
    <div></div>
</TopBox>

键入ReactChildrenOfLength=[]|（React.ReactChild[]&{length:T}）
界面道具{
儿童：反应儿童
}
函数TopBox（{children}:Props）{
返回(
{儿童}
);
}
设d=

---

上面的一段代码可能会引起一些混乱，那就是

[].

。如果

children

不是一个元组，那么Typescript就不会为孩子们处理元组，我们的

length

也不会有任何影响。

[].

强制编译器在构建jsx子级时使用元组。

你做得很好，看不到

PropTypes.arrayOfLength（3）

type:）另一方面，你可以搜索可以实现计数的自定义类型：），我正在寻找类似

children:React.ReactChild[]（3）

，但这不起作用。我讨厌把同一件事写三遍。@what't type本身来做这件事可能和把同一件事写三遍一样冗长，但至少可以重复使用：）

type ReactChildrenOfLength<T extends number> = [] | (React.ReactChild[] & { length: T })
interface Props {
    children: ReactChildrenOfLength<3>
}

function TopBox({ children }: Props) {
    return (
    <div>
        {children}
    </div>
    );
}

let d = <TopBox>
    <div></div>
    <div></div>
    <div></div>
</TopBox>