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

Question

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

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

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

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

而addMessaget函数是react组件的绑定(bind)方法:

export var addMessage;

export default class MessageField extends Component {

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

  render() {
    /.../
  }

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

}

到目前为止，一切都很顺利。但我怀疑这是否是一个好的解决方案。 它会导致一些问题吗？或者有更好的方法吗？

Answer 1

这会导致错误。如果您在未安装的组件上调用 setState ，React 将抛出错误。在您的示例中，这意味着如果您不存在 MessageField never 卸载的情况，那么在某个时刻 addMessage 将抛出。当然，您的应用程序不应依赖于任何永不卸载的组件，因为它是 react 语义的核心部分。

更好的方法是使用 redux 并使用 redux 状态和操作重构“添加消息”行为。您的 rpc.on 片段也可以放入其自己的中间件中。