React.JS 中独立组件之间如何通信？答案

【问题标题】：How to communicate between independent components in React.JS?React.JS 中独立组件之间如何通信？
【发布时间】：2014-07-14 00:44:33
【问题描述】：

我是 React.JS 的新手，并试图理解以下内容。假设我有两个组件：两个 HTML 文本输入；我想要实现的是：当用户更改第一个文本字段中的文本时 - 更改同时出现在第二个文本字段中；反之亦然 - 当用户更改第二个文本字段中的文本时 - 更改也会出现在第一个文本中。以反应的方式做这件事的正确方法是什么？ onChange 处理程序中应该写什么？

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

我个人喜欢事件驱动的方法。使用小库（例如 PubSubJS）或使用原生事件滚动您自己的 Pub/Sub 模式很容易。

我在这里写了更多关于后者的内容： http://maketea.co.uk/2014/03/05/building-robust-web-apps-with-react-part-1.html#component-communication

【讨论】：

【解决方案2】：

只要您的两个表单输入都是 (1) controlled inputs 和 (2) 具有指向相同数据的 value 属性，对该数据的任何更改都会更新两个输入。

/** @jsx React.DOM */

var SyncEdit = React.createClass({
  getInitialState: function() {
    return { text: "" };
  },

  render: function() {
    return (
      <div>
        <input type="text" value={this.state.text} onChange={this.handleChange} />
        <input type="text" value={this.state.text} onChange={this.handleChange} />
      </div>
    );
  },

  handleChange: function(evt) {
    this.setState({text: evt.target.value});
  }
});

React.renderComponent(<SyncEdit />, document.body);

这里是a JSFiddle to demonstrate：http://jsfiddle.net/BinaryMuse/2K5qX/

【讨论】：

布兰登，谢谢你的回答。但是，如果我将这两个输入放在完全不同的组件中怎么办？这种情况下如何建立通信？
@ArtemVorobyev 你通常会找到一些组件（通常靠近组件层次结构的顶部）或一些共享模型对象，并让它“拥有”数据，这些数据通过属性传递给子组件。跨度>
@ArtemVorobyev 要在组件之间获得更多分离，请查看 React 的 Flux 架构模式。对于单个字符串来说这将是多余的，但如果一个组件是未读消息计数，另一个是消息收件箱，那么它可能会很有用。
这没有回答问题。这不是两个独立组件之间的通信。这只是一个组件（SyncEdit）。
嗨，如果我错了，请原谅我，但据我了解，独立组件不共享共同的父级，否则它们只是（一个）组件（父级）的子组件。我认为@i_like_robots 建议的PubSubJS 符合要求。