Question

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

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

现在，我想在另一个文件中使用changeMessageState，但我不知道如何导出它。那么，怎么做呢？我正在考虑将changeMessageState放在一个单独的文件中，并从两个地方调用它，即仅在react组件内和另一个文件中调用它。问题是，如果我把它放在一个单独的文件中，那么“这个”指的是什么？它不会再引用该组件了，对吧？那么，我该如何做到这一点？

编辑解释更多：实际上，我有一个单独的文件，我使用firebase登录当登录过程中出现错误时，我想在其中设置错误消息并将其显示在App组件中。所以，我想在firebase登录函数内部的App中使用changeMessageState，因此可以从那里设置错误消息。这就是我想要实现的目标。

Answer 1

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

function changeMessageState(component, message) {
  component.setState({
    message,
  });
}

// then in your components
changeMessageState(this, message)

Answer 2

如果您不想从与该组件没有直接关系的其他组件中调用一个组件的函数，那么您可以将该函数声明为该类的静态成员，并通过导入它在其他地方使用它组件如

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

并像

一样使用它

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

然而，在this方法中static并不可用，您无法在其中执行setState。

如果你希望从那时调用changeMessageState的组件的setState，我想你可以简单地将它添加到一个单独的文件中，如

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

然后使用它，首先导入

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

并像

一样使用它

changeMessageState.call(this, message);

或者你需要所有组件的共享状态，那么你应该真正考虑使用redux，它为组件提供了一种保持共享状态的方法。

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

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

并在App组件中使用它，如

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

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

2 个答案: