使用Typescript装饰器来劫持React组件

最近在捣鼓Typescript的装饰器，NodeJs项目的装饰器比较好理解，但是React项目的装饰器由于有JSX，走了一点弯路，但是总之来说是新技能get

typescript对装饰器的说明

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

装饰器为我们提供了运行时修改数据的能力。

React例子

Parent.tsx

@Component
export default class App extends PureComponent {
  handleClick() {
    console.log('parent click');
  }
  render() {
    return (
      <div className="App" onClick={this.handleClick}>parent</div>
    );
  }
}

Component装饰器

function Component<T extends { new(...args: any[]): any }>(component: T) { // 泛型限定
  return class extends component {
    handleClick() { // 劫持onClick
      super.handleClick()
      console.log('child clicked');
    }
    render() {
      const parent = super.render()
      // 劫持onClick
      return React.cloneElement(parent, { onClick: this.handleClick })
    }
  }
}