React.js：同一父母的兩個孩子之間的交流？

Question

我有一個父組件： Previewer ，它呈現兩個孩子。

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

當用戶點擊SubtitleRow ，它應該將變量（例如startTime和EndTime ）傳遞給應播放音頻的AudioPlayer 。

我已經閱讀了官方文檔 ：

對於沒有父子關系的兩個組件之間的通信，您可以設置自己的全局事件系統。 訂閱componentDidMount（）中的事件，取消訂閱componentWillUnmount（），並在收到事件時調用setState（）。 通量模式是安排這種方式的可能方式之一。

我認為他們有關系（兄弟姐妹），那么，還有什么方法可以實現他們的溝通嗎？

根據JavaScript Good Parts或JavaScript設計模式，不建議使用全局事件或變量。

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}" />
    );
  }
}