Typescriptアクセサリを使用してReactコンポーネントをハイジャック

最近はTypescriptのデコレーションを叩いているのですが、NodeJsプロジェクトのデコレーションがわかりやすいのですが、ReactプロジェクトのデコレーションはJSXがあるので少し回り道をしましたが、とにかく gettypescriptアクセサリーの説明
アクセラレータは、クラス宣言、メソッド、アクセス記号、プロパティ、またはパラメータにアタッチできる特殊なタイプの宣言です.デザイナは@expressionという形式を使用しており、expressionが評価された後は関数でなければなりません.実行時に呼び出され、デザイナの宣言情報がパラメータとして入力されます.
装飾器は の能力を提供してくれました.
React例
Parent.tsx

@Component
export default class App extends PureComponent {
  handleClick() {
    console.log('parent click');
  }
  render() {
    return (
      
parent
    );
  }
}

Component装飾器

function Component(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に興味のある仲間は私の微信交流を加えることができます~