Javascript 使用反应组件之外的反应组件方法

我正在制作一个聊天应用程序，希望将它的各个部分分开

例如，我有一部分描述通信逻辑的代码。因此，当有人收到一条消息时，可以使用函数

addMessage

将其传递给react组件：

import { addMessage } from './components/App.Chat.MessageField'

rtc.on('data', (data) => {
  /.../
  addMessage(message);
});

export var addMessage;

export default class MessageField extends Component {

  constructor() {
    /.../
    addMessage = this.addMessage.bind(this);
  }

  render() {
    /.../
  }

  addMessage(message) {
    /.../
    this.setState(/.../);
  }

}

而

addMessaget

函数是react组件的绑定方法：

import { addMessage } from './components/App.Chat.MessageField'

rtc.on('data', (data) => {
  /.../
  addMessage(message);
});

export var addMessage;

export default class MessageField extends Component {

  constructor() {
    /.../
    addMessage = this.addMessage.bind(this);
  }

  render() {
    /.../
  }

  addMessage(message) {
    /.../
    this.setState(/.../);
  }

}

---

到目前为止，一切进展顺利。但我怀疑这是个好办法它会导致一些问题吗？或者有更好的方法吗？

这会导致错误。如果对未安装的组件调用

setState

，React将抛出错误。在您的示例中，这意味着如果您不在

MessageField

为从不卸载的情况下，那么在某个点

addMessage

将抛出。当然，你的应用程序不应该依赖于你的任何组件，因为它是react语义的核心部分

---

更好的方法是使用

redux

并使用redux状态和操作重构“添加消息”行为。您的

rpc.on

代码片段也可以放在它自己的中间件中

组件方法通常只应该由组件本身使用，或者可能作为道具传递给子组件。它们不应被视为公共API。您可以在组件的

componentDidMount

中创建

rtc.on

侦听器，然后在

componentWillUnmount

@Tholle中删除侦听器，谢谢，我会尝试的。但我不明白这仅仅是因为可读性和惯例，还是因为它会在react应用程序的工作中导致真正的错误。我认为它不会起作用，因为

MessageField

类的每个实例都会绑定一个

addMessage

方法，因此，不清楚这样做会调用哪个组件的

addMessage

。