react中 ts注入器的使用

мо仙堡杠把子灬

已于 2023-03-28 09:40:46 修改

阅读量320

点赞数

分类专栏： typescript react 文章标签： react typescript 做一个有知识的流氓

于 2021-01-05 16:29:01 首次发布

本文链接：https://blog.csdn.net/weixin_43553701/article/details/112241930

版权

react 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

typescript

3 篇文章 1 订阅

订阅专栏

你羡慕的生活背后都是你熬不起的苦

class中函数注入
好比原来的点击事件是每次只增加一个数但是加上函数注入每次就增加三个数

function addTwo() {
  return function (target: any, methodName: string, descriptor: PropertyDescriptor) {
    const fun = descriptor.value;
    descriptor.value = async function () {
      const self: any = this;
      try {
        const data = await fun.bind(self)();
      } catch (error) {
        // error
      }
      const num = self.state.num + 2;
      self.setState({
        num
      });
    };
  };
}


export default class In extends Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      num: 0,
    };
    this.add = this.add.bind(this);
  }
  @addTwo() // 这里是函数注入 
  add() {
    const num = this.state.num + 1;
    this.setState({
      num
    });
  }
  render() {
    return (
      <div>
        <Button onClick={this.add}>加一</Button>
        <br/>
        {this.state.num}
      </div>
    );
  }
}

class注入
原来的类中只有增加方法但是没有减少使用类注入就可以增加一个减一的方法

function Class() {
  return function (target: any): any {
    return class extends target {
      constructor(...args: any[]) {
        super(...args);
        if (!this.state) {
          this.state = {};
        }
        this.del = this.del.bind(this);
      }
      del() {
        const num = this.state.num - 1;
        this.setState({
          num
        });
      }
      render() {
        return (
          <div>
            <Button className="mr10" onClick={this.add}>加一</Button>
            {this.state.num}
            <Button className="ml10" onClick={this.del}>减一</Button>
          </div>
        );
      }
    };
  };
}

@Class()
export default class In extends Component<any, any> {
  
  constructor(props: any) {
    super(props);
    this.state = {
      num: 0,
    };
    this.add = this.add.bind(this);
  }

  add() {
    const num = this.state.num + 1;
    this.setState({
      num
    });
  }
  render() {
    return (
      <div>
        <Button onClick={this.add}>加一</Button>
        <br/>
        {this.state.num}
      </div>
    );
  }
}