javascript - 在 react 组件之外使用 react 组件的方法

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

例如，我有一部分代码描述了通信逻辑。因此，当有人收到消息addMessage函数时，可以使用该函数将其传递给组件：

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

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

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

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代码段也可以放入其自己的中间件中。