使用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有興趣的夥伴能夠加我微信交流~