イベントメソッドを孫コンポーネントに渡す

Question

私はReactに少し新しくなっています。これは少し新しいことの質問であれば私を許してください。

私はモーダルポップアップが表示されているかどうかを制御するために状態を使用する基材成分（ページ）を持っている：

constructor(props) { 
    super(props); 

    this.state = { 
     showModal : false, 
     modalContent : 'Initial Modal Content' 
    }; 

    this.showModal = this.showModal.bind(this); 
    this.hideModal = this.hideModal.bind(this); 
} 

showModal(modalContent) { 
    this.setState({ 
     showModal : true, 
     modalContent : modalContent 
    }); 
} 

hideModal(e) { 
    this.setState({showModal : false}); 
} 

私の問題は、私は孫のコンポーネントが私のモーダルを開くことができるようにしたいということです。

は、私は孫のコンポーネントに、子コンポーネントに状態を渡すと、これを行うことができます知っている：ちょうど私には少しずさん思わ <PartnersTable showModal={this.showModal} partners={PARTNERS} />

を、多分それはちょうどリアクト方法です。

私はこれを正しくやっているのか、これをよりクリーンな方法で教えてもらえますか？

あなたはGitHubの上で私の完全なアプリを表示することができます。https://github.com/CCChapel/Thy-Kingdom-Come/blob/master/react.js

感謝を！

Answer 1

。

親が子どもに小道具/状態を渡す唯一の方法は、それを下に通すことです。反作用は上から下へ単方向である。親から子供まで。

あなたの前提は正しいです。それはかなりうんざりすることができます。 ReactはUIを提示するためのものであり、状態管理の簡単な事例であることを知っていなければなりません。アプリケーションがより複雑になり、直接的かつ簡略化された方法で州を引き渡す必要がある場合、Redux、MobXまたは他の州のコンテナを使用してください。

Redux（私はReduxを自分で使用しています）を使用することを考慮して、ツリーの下に小道具を渡すのが嫌な人は、

は、次のリソースを考慮してください。

• https://egghead.io/courses/getting-started-with-redux
• http://redux.js.org/docs/introduction/
• https://github.com/reactjs/redux/tree/master/examples

はしかし時の状態のコンテナのみを反応させ、最初に使用した使用に慣れる作品をどのように反応するかを学習するにはアプリケーションはより複雑になります。

Answer 2

-Eric

あなたはモーダルの可視性をトリガーしたい子コンポーネント（複数可）に小道具としてごshowModal方法を渡す必要があることを達成するために。これは、親コンポーネントのレンダリング方法はどうあるべきかです：あなたの子コンポーネントで次に

render() { 
    return(
     <ChildComponent showModal={this.showModal}> 
    ) 
} 

：あなたはそれを正しくやっている

class ChildComponent extends Component { 

    render() { 
     return(
      <input type="button" onClick={this.props.showModal} value="show modal"/> 
     ) 
    } 
}