请问如何进行Props约束某个JSX字段的值呢？

Question

大家好，
请问想要定义Props，有一个child，我想要固定格式的（如下：一定要有Breadcrumb，然后其他的内容可以自定）：

<Breadcrumb>
...
</Breadcrumb>
<Button>
...
</Button>

但是我只知道使用 React.ReactNode 约束数据类型，但是这个不能保证我上面的JSX格式：

type MyCmponentProps = {
  title: string,
  child: React.ReactNode
}

Answer 1

约束不了。

你只能类型约束 child 一定具有某种 Props，从而近似得到约束子组件类型的目的：

type ParentProps {
    child: React.ReactElement<ChildProps>
}

但你不能约束子组件中一定包含某种子组件。原因很简单，你觉得：

(<Breadcrumb>...</Breadcrumb><Button>...</Button>)

这玩意儿是什么类型？

没有类型，何谈约束？

---

P.S. 你要真想做约束的话建议在运行时做验证，而不是靠 TS 类型声明。