reactjs - 在 React TypeScript 中限制允许的子级

Question

在 React 项目中使用 TypeScript 是否有任何方法可以对组件允许的子组件强制执行一些约束？编译时是首选，但运行时仍然会有帮助。

就我而言，我有一个组件，将其命名为 <ClickTracker> ，并且它需要一个具有回调属性的单个子项 onClick它为回调添加了一些额外的功能(跟踪外部库中的点击)。

只要 <ClickTracker> 中的 child 就可以很好地工作。实际上确实利用了 onClick prop(例如，所有 HTML 元素都实现了这一点)，但否则会默默失败。

例如，这有效:

<ClickTracker>
  <div>Hello</div>
</ClickTracker>

但这不起作用:

class Hello extends Component<{}, {}> {
  render() {
    return <div>Hello</div>
  } 
}

<ClickTracker>
  <Hello />
</ClickTracker>

但这确实有效，因为它通过了 onClick到 HTML 元素:

class Hello extends Component<{onClick: MouseEventHandler}, {}> {
  render() {
    return <div onClick={this.props.onClick}>Hello</div>
  } 
}

<ClickTracker>
  <Hello />
</ClickTracker>

如您所见，我希望对可以进入内部的元素有一些安全措施 <ClickTracker>基于子 Prop 。或者如果有其他方法可以做到这一点。

Answer 1

目前无法使用 TypeScript 强制执行子类型。

更多信息请参见this issue .