Question

我希望我的组件仅接受3个React.ReactChild类型的孩子。我不确定ReactChild是否是最好的检查类型。基本上是三个sections。

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

现在我有了一些有效的方法。但是我正在寻找一个简短的表达方式。

interface Props {
  children: [
    React.ReactChild,
    React.ReactChild,
    React.ReactChild
  ]
}

Answer 1

重要属性是元组中的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>

[] |是上面可能引起混乱的一部分代码。如果children不是元组，那么Typescript将不会为儿童使用元组，并且我们的length将不会有任何影响。 [] |强制编译器在构建jsx子级时使用元组。

类型检查道具时如何指定孩子的身长？

1 个答案: