React.js：同じ親の2人の子供の間のコミュニケーション？

Question

私は親コンポーネントを持っています：Previewerこれは2人の子供をレンダリングします。

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

ユーザーがSubtitleRowをクリックすると、変数が渡されます。 startTimeとEndTime〜AudioPlayerとなり、オーディオを再生する必要があります。私はofficial documentationを読んだ

：

親子関係を持たない2つのコンポーネント間の通信のために、独自のグローバルイベント システムを設定することができます。 componentDidMount（）のイベントに登録し、 componentWillUnmount（）で登録を解除し、イベントを受け取ったときにsetState（）を呼び出します。 フラックスパターンは、これを配置する方法の1つです。

私は、彼らが関係（兄弟）を持っていると思うので、その通信を実装するための他の方法はありますか？

グローバルイベントまたは変数は、JavaScriptによると、良いパーツまたは何か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}" /> 
    ); 
    } 
}