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

前端  /  管理员 发布于 7年前   353

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

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

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

react例子

Parent.tsx

@Componentexport 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
来自:https://segmentfault.com/a/1190000019888547