2016-10-22 25 views
1

私はjavascriptの世界で初めて、react.jsを使用してフロントエンドアプリケーションを作成します。以下は私がコード化できないシナリオです。 リスト内のいずれかのアイテムをクリックすると、選択したアイテムの詳細が表示され、アイテムのビューが削除されるようなアイテムのリストを表示したいとします。私は反応ルータライブラリを使用しようとしましたが、反応ルータは子コンポーネントの詳細が親コンポーネント(アイテムのリスト)の下でレンダリングされるネストされた方法で動作します。親コンポーネントを隠すわけではありません。子コンポーネントをクリックしたときに親反応コンポーネントを隠す

答えて

1

親コンポーネントから子onClick propに関数を渡し、その関数で隠されたイベントを処理することができます。単純な実装は次のようになります。

class Parent extends React.Component { 
    constructor() { 
     super(...arguments); 
     this.state = {hide: false}; 
    } 
    handleChildClick() { 
     this.setState({hide: true}); 
    } 
    render() { 
     const {hide} = this.state; 
     if (hide) { 
      return null; 
     } 
     return <Child onClick={this.handleChildClick.bind(this)} />; 
    } 
} 

class Child extends React.Component { 
    render() { 
     const {onClick} = this.props; 
     return <button onClick={onClick}>Hide Parent</button>; 
    } 
} 
+0

フィリップありがとうございます。しかし、反応コンポーネント** context **属性を使用してよりクリーンな方法でそれを達成することができました。親要素にonClickコールバック(nextPage)を追加しました。/* onClickコールバック*/nextPage(){ let url = this.context.router.push(url); }/*コンテキストを宣言する*/ .contextTypes = { ルータ:React.PropTypes.object.isRequired、 }; –

関連する問題