如何在打字稿类中调用反应组件内定义的函数？

Question

 export class abc extends React.Component<IProps, IState> {    function(name: string) {    console.log("I wish to call this function"+ name);    }render() {    return (      <div>Hello</div>    );  }}现在我想将上面定义的组件的函数方法调用到另一个 xyz.ts 类（不是反应组件）中，是否可以做同样的事情？

Answer 1

如果您想在不同的 ts 文件中使用该函数，则绝对应该将该函数移出组件并将其导出。

Answer 2

您可以像这样使用侦听器模式：

export interface IListener {

    notify: (name:string) => void;

}

export class Listener {

    listener : IListener[] = [];

    addListener(listener: IListener) {

      this.listener.add(listener)

    }

    notifyListener() {

      this.listener.forEach((listener) => {

          listener.notify("abc");

      });

    }

  }

  export class abc extends React.Component<IProps, IState> implements IListener {

    componentDidMount() {

        // register this class as a listener

        new Listener().addListener(this);

    }

    public notify(name:string) {

        this.test(name);

    }

    test(name: string) {

      console.log("I wish to call this function"+ name);

    }

    render() {

      return (

      <div>Hello</div>);

    }

    

  }