2016-12-13 60 views
3

以下は、reactjsの子コンポーネントから親コンポーネントに値を渡す正しい例です。Reactjs - 子コンポーネントから祖母コンポーネントへの値の受け渡し方法

App.jsx

import React from 'react'; 

class App extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
     data: 'Initial data...' 
     } 

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

    updateState() { 
     this.setState({data: 'Data updated from the child component...'}) 
    } 

    render() { 
     return (
     <div> 
      <Content myDataProp = {this.state.data} 
       updateStateProp = {this.updateState}></Content> 
     </div> 
    ); 
    } 
} 

class Content extends React.Component { 

    render() { 
     return (
     <div> 
      <button onClick = {this.props.updateStateProp}>CLICK</button> 
      <h3>{this.props.myDataProp}</h3> 
     </div> 
    ); 
    } 
} 

export default App; 

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.jsx'; 

ReactDOM.render(<App/>, document.getElementById('app')); 

私は壮大-親コンポーネントに子コンポーネントから値を渡すことについての私の考え方をクリアする必要があります。どうぞ、助けてください。

答えて

8

propsでグランド関数の更新関数を渡すことができます。ちょうどそれをもう一度子コンポーネントから渡すことができます。

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     data: 'Initial data...' 
 
    } 
 
    this.updateState = this.updateState.bind(this); 
 
    } 
 

 
    updateState(who) { 
 
    this.setState({data: `Data updated from ${who}`}) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     Parent: {this.state.data} 
 
     <Child update={this.updateState}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class Child extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     Child component 
 
     <button onClick={() => this.props.update('child')}> 
 
      CLICK 
 
     </button> 
 
     <GrandChild update={this.props.update}/> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class GrandChild extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     Grand child component 
 
     <button onClick={() => this.props.update('grand child')}> 
 
      CLICK 
 
     </button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

6

最も簡単な方法は、彼らが行く必要がある限り、ツリーの下にupdateState機能を渡すことです。理想的には、あなたの孫のコンポーネントは、祖父母のコンポーネントから完全に離れていると考えられています...しかし、それはすぐに退屈になります。

これは、React Reduxが対象です。パブリッシュ/サブスクライブモデルを使用してグローバル状態オブジェクトを作成します。 (パブリッシュ/サブスクライブモデルは、「接続」ラッパーを介して幾分抽象化されています。)どこからでもどこからでもアクションをディスパッチできます。アクションは、グローバル状態を変換する「レデューサー」をトリガーし、Reactは、コンポーネントを再レンダリングすることによって(驚くほど効率的な方法で)変更された状態に反応します。

小さなプログラムの場合、Reduxは過度の攻撃になる可能性があります。あなたが本当にあなたのモデルに祖父母/親/孫を持っているのであれば、updateState関数を渡すだけです。あなたのプログラムが成長したら、それらをReduxに置き換えてみてください。 (特にIMHOは標準的なチュートリアルはひどいので)学ぶのは難しいかもしれませんが、あなたが説明している一般的な問題に対する意図した解決策です。

関連する問題