使用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 })
    }
  }
}

点击渲染以后的parent字符，能够看到劫持成功

项目地址

react-decorator-example

文后

本文写的只是比较简单的装饰器用法，可是能够基于此文的原来来开发如登陆后才能访问的组件之类的装饰器，将业务逻辑更好的组织起来。

对TS有兴趣的伙伴能够加我微信交流~