2016-11-17 11 views
0

Reactコンポーネントに複数の親があると仮定します。私が夕食の親(最高レベルのコンポーネント)の機能に電話したいとき。どうやってやるの。サンプルコードをご覧ください。複数の親をネストしたときに子コンポーネントからスーパー親関数に呼び出す

`` `

export default class WeekView extends React.Component {  
    constructor(props) { 
     super(props); 
    } 

    // this functions has to be called from third child 
    loadData() { 
     var data = []; 
     this.setState({events : data}); 
    } 

    render() { 
     return (
      <ChildOne > 
     ); 
    } 
} 

export class ChildOne extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <ChildTwo /> 
     ); 
    } 
} 

export class ChildTwo extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return(
      <ChildThree /> 
     ); 
    } 
} 

export class ChildThree extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    addEvent() { 
     // how to call loadData() function, which is included in the highest parent 
    } 

    render() { 
     return(
      <Button onCLick={this.addEvent.bind(this)} /> 
     ); 
    } 
} 

` ``

うん。私たちは小道具を介して階層の最上部に要求を送ることができます。しかし、階層を通過しない限り、別の方法でそれを行う方法はありますか?前もって感謝します。

答えて

2

これは、親コンポーネントの機能を小道具に渡すという方法です。あなたはこれがあなたの返答だと言いました。

基本的にあなたの親には、それがトリガーする子に渡す機能があります。

+0

これについて学習した後、#fluxアーキテクチャがこの問題の解決に役立つことを知りました。 –

+0

[builtwithreact.com](http://buildwithreact.com/tutorial/events)から採用されたコンセプトの[jsbin](http://jsbin.com/yayatucowu/1/embed?js,output) – cjsimon

関連する問題