Javascript 在多个组件中重用具有setState的函数

我在react组件中有一个函数，需要在另一个文件中使用

class App extends Component{
    changeMessageState(message) {
    this.setState({
      message,
    });
  }
render(){
return(
  <div>hello</div>
);
}

类应用程序扩展组件{
更改消息状态（消息）{
这是我的国家({
消息
});
}
render（）{
返回(
你好
);
}

现在，我想在另一个文件中使用

changeMessageState

，但我不知道如何导出它。 那么，如何做到这一点呢？ 我正在考虑将changeMessageState放在一个单独的文件中，并从两个位置调用它，即在react组件内和仅从那里调用的另一个文件中。 问题是，如果我把它放在一个单独的文件中，那么“this”将指什么？它将不再指组件，对吗？ 那么，我如何做到这一点呢

编辑以解释更多信息： 实际上，我有一个单独的文件，我正在使用firebase登录 当登录过程中出现错误时，我想在其中设置错误消息并将其显示在应用程序组件中。 因此，我想在firebase登录函数中使用应用程序中的changeMessageState，因此可以从中设置错误消息。

---

这就是我想要实现的。

您可以将此作为参数传递：

函数changeMessageState（组件、消息）{
组件设置状态({
消息
});
}
//然后在您的组件中
changeMessageState（此，消息）

如果您不想从与该组件没有直接关系的其他组件中调用某个组件的函数，则可以将该函数声明为类的静态成员，并通过类似于

export default class App extends Component{
    static changeMessageState(message) {
         // logic here
    }
    render(){
       return(
          <div>hello</div>
    );
}

login((message) => {
     this.changeMessageState(message)
})

但是，

这个

在

静态

方法中实际上不可用，您不能在其中执行setState

如果您希望设置从中调用changeMessageState的组件的状态，我想您可以简单地将其添加到单独的文件中，如

export const changeMessageState = (message) => {
     this.setState({message});
}

然后要使用它，请先导入

import { changeMessageState } from 'path/to/changeMessageState'

像这样使用它

import App from 'path/to/App'
....
App.changeMessageState(value)
...

changeMessageState.call(this, message);

或者更好的是，您需要为所有组件提供一个共享状态，然后您应该真正研究使用

redux

，它为组件提供了一种保持共享状态的方法

另一种解决方案是提供一个回调函数，例如，您希望从该函数调用

changeMessageState

export const login = (callback) => {
    //your logic here
    req.then((res) => {
         callback(res)
    }).catch((error) => {
         callback(error)
    }) 
}

并在应用程序组件中使用它，如

export default class App extends Component{
    static changeMessageState(message) {
         // logic here
    }
    render(){
       return(
          <div>hello</div>
    );
}

login((message) => {
     this.changeMessageState(message)
})

---

很好的一个@GG…！好的，但是我想使用这个功能的另一个地方，“this”应该仍然是指原始应用程序的this，无论我在哪里使用它。它不应该指向不同的“this”，我也不需要单独导出这个功能？？如果是，那么这就是我要找的不，你不需要单独导出这个功能Don’t me try out i try out i try out i try out i得到了这个错误-无法读取未定义的属性'bind'，甚至vscode linter说--changeMessageState应该放在构造函数之前。对于不便之处，这在静态方法中是不可用的，您能解释一下您想要查看的内容吗，也许还有另一个方法