React - 別のコンポーネントの関数にアクセスするにはどうすればいいですか？

Question

私の構造は、次のような次のとおりです。

 <ParentComponent /> 
<Child 1 />  <Child 2 /> 

私は<Child 1 />で機能を持っています。 <Child 1 />はグリッドレイアウトを制御し、<Child 2 />はボタン付きのNavbarなので、<Child 2 />にボタンを入れて、<Child 1 />のいくつかのパラメータをリセットします。

どうすればよいですか？限り、私が見ることができるように、refsは、ツリーの上に1つの "ステップ"を行くことができます。

この機能は、parentコンポーネントから呼び出すことはできません。ここには道がありますか？私が考えることができるすべてのソリューションは、実際にリアクション・マインドセット、すなわち単方向データフローに従っているわけではありません。

Answer 1

あなたは両方のコンポーネントのコンテナとして親コンポーネントを作ることができるなど、新しい値で再描画されます。したがって、すべての状態と関数は、親コンポーネントで処理され、他のコンポーネントに渡されます。

class Parent extends React.Component { 

     constructor() { 
      super(); 
      this.state = { 
       controls: controls 
      } 
     } 

     onClick = (dataFromChild2) => { 
       //Resetting 
       this.setState({controls: dataFromChild2}) 
     } 

     render() { 
      return (
       <div> 
         <Child1 gridControl={this.state.controls}/> 
         <Child2 onClick={this.onClick}/> 
       </div> 
      ) 
     } 
    } 

あなたは子コンポーネント

UPDATEその

だと思い、このようにthis.propsからgridControlとonClickにアクセスすることができ、あなたが処理するために必要な状態と機能を持つ親コンポーネントを持っていますデータ。子コンポーネントはそれらのデータを受け取り、それに従って状態を更新します。

のは、親コンポーネントは、このようなものであるとしましょう：あなたはCHILD1のための状態を使用している、としたくない場合は

class Child2 extends React.Component { 
    constructor() { 
    super(); 
    } 

    onClick =() => { 
    var data = {}; 
    this.props.onClick(data); 
    }; 

    render() { 
    return (
     <div> 
     <button onClick={this.onClick}/> 
     </div> 
    ); 
    } 

：

class Parent extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     gridControl: {} 
    } 
    } 

    onChild2ButtonClick = (dataFromChild2) => { 
    this.setState({ 
     gridControl: dataFromChild2 
    }); 
    }; 

    render() { 
    return (
     <div> 
     <Child1 controls={this.state.gridControl}/> 
     <Child2 onClick={this.onChild2ButtonClick}/> 
     </div> 
    ); 
    } 
} 

CHILD2コンポーネントは次のようなものですそれを処理するために親コンポーネント内の関数を使って小道具に変更し、親コンポーネントから受け取った新しい小道具でcomponentWillReceivePropsメソッドの状態を更新し、送信された小道具がChild1コンポーネントで使用される状態と一致するようにします。

希望するものはクリアされます。

Answer 2

方法1： このためには、店舗を維持する必要があります。 <Child2 />コンポーネントのボタンをクリックすると、ストアの変数が更新されます。ストア内の更新された変数を読み込み、<Child1 />コンポーネントの更新値が変更されているかどうかを確認します。あなたは、店舗の選択肢としてflux、redux、mobxなどのいずれかを使用することができますが、あなたはreduxで始めることができます。

方法2：

あなたは、ストアを使用するコールバック関数を介して親に<Child2 />更新でご<Parent />とボタンのクリックで、あなたの状態を状態を維持したくない場合。この状態値を小道具として<Child1 />に渡し、小道具がある場合は変更してください。

<ParentComponent> 
    <div> 
     <Child1 />  
     <Child2 /> 
    </div> 
<ParentComponent /> 

Child1とChild2ParentComponentを通じて "通信" 必要があります両方：あなたの構造は、次のようになります場合は

Answer 3

。
Child2がボタンクリックイベントについてParentComponentに通知する場合は、Child1に適切な小道具を再レンダリングするか、Child1がpropとなる機能を起動します。これは、基本フローであるreact.js 例として、ButtonおよびDoor子コンポーネントを持つHouseコンポーネントを考えてみます。 ButtonはDoorの開閉を切り替えます。 this.state.isOpenedDoorの各変更に

class House extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      isOpened: props.isOpened, 
     }; 

     this.toggleOpenDoor = this.toggleOpenDoor.bind(this); 
    } 

    toggleOpenDoor() { 
     this.setState({ 
      isOpened: !this.state.isOpened 
     }); 
    } 

    render() { 
     return (
      <div> 
       <Button onClick={this.toggleOpenDoor} /> 
       <Door isOpened={this.state.isOpened} /> 
      </div > 
     ); 
    } 
} 

House.propTypes = { 
    isOpened: React.PropTypes.bool 
}; 

House.defaultProps = { 
    isOpened: true 
}; 

export default House; 

は小道具