Reactの兄弟間の通信

Question

dateを小道具として受け入れ、leftとrightの2つの日付を返す再利用可能なタイムバーを作成しようとしています（例えば、ceilやfloorの日付に潜在的に多くのロジックがあります）。

私はleftとrightを受け入れる他のコンポーネント（グラフなど）をタイムバーと同期させることができる消費者にこれを伝える最良の方法を理解しようとしています。

親（日付を受け取り、CHILD2に渡し、CHILD1に日付を渡す）

- >CHILD1（CHILD1は、私が作成したタイムバーとなり、小道具日付に基づいて、左右の日付を生成し、 ）に渡された

- >CHILD2（これはCHILD1からLEFTとRIGHTの日付が必要です）

私は2つのオプションを見てきました：

コールバックルート： 親は日付とコールバックを渡して、状態を左右に更新します。それからそれはそれを必要とするグラフのためにこの左、右の日付を使います。これは、親を必要とするロジック で

http://jsbin.com/jikoya/edit?js,console,output

OR

セパレートES6クラスがこのクラスをインスタンス化すると、それが強化され、左を返す、右使用する準備ができてさかのぼります。次に、これを状態に追加し、すべてのコンポーネントにフローさせます。

constructor(props) { 
    super(props); 
    this.timebar = new Timebar(new Date('01-16-2016')) 
    this.state = { 
     leftDate: this.timebar.leftDate, 
     rightDate: this.timebar.rightDate 
    } 
    } 
render(){ 
    return(
      <timebarObj={this.timebarObj} /> 
      <graph leftDate={this.state.leftDate} rightDate={this.state.rightDate}/> 
    ) 
} 

この別個のクラスメソッドを実行する際の欠点は何ですか？アンチパターンですか？私が見ることができる利点は、私はこの全体のインスタンスを送信することによって、小道具の中でさらに多くを渡すことができるということです。子供がそのコンテナとは独立して自身の状態を追跡するために起こっている場合は、あなたが本当に制御されていないコンポーネント対制御されている話をしている何

Answer 1

... https://reactjs.org/docs/forms.html#controlled-components

それが制御不能にする必要があります。

class Child extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     leftDate: "", 
     rightDate: "" 
    } 
    this.calcDates = this.calcDates.bind(this) 
    } 

    componentDidMount(){ 
    this.calcDates(this.props); 
    } 

    componentWillReceiveProps(nextProps){ 
    if (nextProps.origDate !== this.props.origDate) { 
     this.calcDates(nextProps) 
    } 
    } 

    calcDates = (nextProps) => { 
    console.log("Child: calcDates", nextProps) 
    const lf = nextProps.origDate + " left date"; 
    const rt = nextProps.origDate + " right date"; 
    this.setState({leftDate: lf, rightDate: rt}, this.sendToParent) 
    } 


    render() { 
    return this.props.children(this.state) 
    } 
} 

class Parent extends React.Component { 
    render() { 
    return (
     <div> 
     <Child> 
     { state => (
      JSX that relies on state from child... 
     ) 
     } 
     </Child> 
     </div> 
    ) 
    } 
}