Question

在React项目中使用TypeScript有没有办法对组件的允许子项强制执行某些约束？编译时是首选，但运行时仍然有用。

在我的情况下，我有一个组件，称之为<ClickTracker>，并且它期望一个具有回调道具onClick的孩子，并且它为回调添加了一些额外的功能（跟踪外部的点击库）。

只要<ClickTracker>中的孩子确实使用onClick道具（例如，所有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>内的内容进行一些安全保护。或者如果有另一种方法可以做到这一点。

Answer 1

目前，没有办法用TypeScript强制执行子类型。

this issue中有更多信息。

Answer 2

或者，如果有另一种方法可以做到这一点

单击事件冒泡，除非某些组件停止传播（不是本机组件的默认行为）。所以你可以：

<div onClick={()=>alert('still noted')}>
  <Hello />
</div>

那个div就是你的ClickTracker

在React TypeScript

2 个答案: