React.js：同一父元素下两个子元素之间的通信？

Question

我有一个父组件：Previewer，它渲染了两个子组件。

class Previewer extends Component {
  render() {
    return (
      <AudioPlayer />
      <SubtitleRow />
    );
  }
} 

当用户点击SubtitleRow时，它应该传递变量，例如startTime和EndTime，到AudioPlayer，然后播放音频。

我已经阅读了官方文档：

对于两个没有父子关系的组件之间的通信，您可以设置自己的全局事件系统。在componentDidMount()中订阅事件，在componentWillUnmount()取消订阅，并在接收事件时调用setState()。Flux模式是一种可能的排列方式。

我认为它们有关系（兄弟姐妹），所以还有其他实现它们之间通信的方法吗？

不建议使用全局事件或变量，根据《JavaScript权威指南》或其他JavaScript设计模式。

- Jean Y.C. Yang

---

你链接的页面讨论了父子/子父关系（尽管我认为后者没有很好地解释）- 要做兄弟关系，您可以将它们组合在一起。使您的父组件持有所有逻辑/状态以协调子组件，通过props将必要的数据传递给子组件，通过回调作为props将事件传递回父组件。这种方式的优点是您的组件只关心自己和它们控制的组件，因此事情相当好地解耦。 - Joe Clay

请参考 https://facebook.github.io/react/docs/tutorial.html#callbacks-as-props，了解如何使用回调函数作为属性与父组件进行通信的示例。 - Joe Clay

我对ReactJS还很陌生，但也许这会有所帮助：<AudioPlayer onClick={someFunction}/>，然后是 someFunction:function(){this.setState({x:"/"})}，最后添加 <SubtitleRow this.state.x/>。 - Sai Ram

Answer 1

你可以使用状态将变量传递给AudioPlayer组件。然后在SubtitleRow组件中，您可以调用函数this.props.onClick(startTime, endTime)。

class Previewer extends Component {
 constructor() {
     this.state = { 'startTime': 0, 'endTime' : 0 };
     this.handleClick= this.handleClick.bind(this);
 }

 handleClick(startTime, endTime) {
   this.setState({
     'startTime': startTime,
     'endTime': endTime
   });
 }

  render() {
    return (
      <AudioPlayer startTime="{this.state.startTime}" endTime="{this.state.endTime}"/>
      <SubtitleRow onClick="{this.handleClick}" />
    );
  }
} 

- Olivier Boissé

---

但他如何从SubtitleRow获取起始和结束呢？ - omarjmh

在SubtitleRow组件中，他应该调用this.props.onClick(startTime, endTime)，然后它将调用父组件（Previewer）中的handleClick函数来刷新状态，接着音频播放器将使用新的startTime和endTime重新渲染。 - Olivier Boissé