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

【问题标题】：How to call a function defined inside react component in a typescript class?如何在打字稿类中调用反应组件内部定义的函数？
【发布时间】：2021-03-22 01:29:56
【问题描述】：

 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类（不是react组件）中是否可以这样做？

【问题讨论】：

一种方法是将您的函数作为道具传递给子组件。
这个函数没有名字。你怎么称呼这个？此外，从另一个非组件类中定义的函数调用它对我来说听起来很奇怪。你能澄清一下你想做什么吗？
如果函数允许（并且，如果您需要将它用于不同的组件，这很有可能），您可以将其移出类组件并单独导出：export function foo() { ... }; export class MyClass extends React.Component { ... };。
函数有名字，我希望调用该函数来从非组件类更新组件类的值。

标签： javascript reactjs typescript react-component

【解决方案1】：

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

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>);
    }
    
  }

【讨论】：

【解决方案2】：

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

【讨论】：