React class组件中的函数如何使用装饰器呢？

Question

我在class component里面的函数上使用装饰器，页面一加载就触发了装饰器，但是后面调用方法的时候却没有触发装饰器，且装饰器内的方式也没有执行。怎么在函数上添加装饰器呢？

class ThesisQueryManage extends React.Component{

……

    @sendLog
    GetSubmitTimeline=()=>{
        console.log('嘻嘻嘻');
    }
return （
<a  onClick={()=>this.GetSubmitTimeline()}>查看</a>
）
}


function sendLog (target, name, descriptor) {
    console.log(target, name, descriptor);
    let oldValue = descriptor.value;

    descriptor.value = function () {
        console.log('kkkkkk')
        console.log(`before calling ${name} with`, arguments);
        return oldValue.apply(this, arguments);
    };
    return descriptor;
}

装饰器内的 console.log('kkkkkk')并没有执行。点击按钮的时候也没有触发。应该怎么写呢？

Answer 1

按照你的写法我这边时调用了的可能是其他问题

import { Component, ReactNode } from "react";
import { mapHooks } from "./useMaphooks";
import MapStyle from "./map.module.less";
function SendLog(target:any, name: string, descriptor:any) {
  console.log(target, name, descriptor);
  let oldValue = descriptor.value;

  descriptor.value = function () {
    console.log("kkkkkk");
    console.log(`before calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };
  return descriptor;
}
export default class MapComponent extends Component {
  render(): ReactNode {
    return <div>
      <div id="map" className={MapStyle.map}></div>
      <div>
        <button onClick={()=>this.sendMessag()}>点我</button>
      </div>
    </div>;
  }
  @SendLog
  sendMessag() {
    console.log("10086");
  }

  @SendLog
  componentDidMount(): void {
    
  }
}