子要素の状態に応じて親要素のスタイル要素を変更するにはどうすればよいですか？

Question

子コンポーネントの状態変更中に親コンポーネントにスタイルを設定する方法を理解しようとしています
静的要素としてメニューとサイドバーを含むコンテナコンポーネントと、子要素である があるシナリオを考えてみましょう。メニューをクリックすると、対応するコンポーネントが子コンポーネントとしてレンダリングされます。

私は次のように何かを持っている家庭コンポーネント内

<Route component={ home } > 
     <Route path="menu-1" component={ menu-1 } /> 
     <Route path="menu-2" component={ menu-2 } /> 
     <Route path="menu-3" component={ menu-3 } /> 

に従うように反応-ルータとネストされた絶対的なルートを使用しています：あなたは私がコールバックを渡すことはできません見ることができるよう

<div className='root'> 
     <menuComponent /> 
     <sideBarComponnent /> 
     {this.props.children} 

    </div> 

を子要素への関数 メニュー-1、メニュー-2の場合は問題ありませんが、メニュー-3をクリックしてコンテンツタグの要素をレンダリングしているときは
横幅を与え、サイドバー表示をなしに設定する必要があります ウィルサイドバーは私が家コンポーネント内にそれを処理することができる方法を探して、通常の方法

イムで子供-1の内側にそれを制御することができないコンテナコンポーネントでレンダリングしている

Answer 1

することができます子コンポーネントの小道具に関数を追加する。 親のスタイルを変更する必要がある場合は、子コンポーネントでこの関数を呼び出します。 この機能は、親コンポーネントの状態を変更し、そのスタイルを変更します。

例：あなたは次のようにcomponentWillMount内this.props.location.pathname使用することができます

class Parent extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = { 
      backgroundColor: 'yellow' 
     } 
    } 

    onChangeStyle(backgroundColor) { 
     this.setState({ 
      backgroundColor: backgroundColor 
     }) 
    } 

    render() { 
     return <div style={{backgroundColor: this.state.backgroundColor, padding: 10}}> 
      <Child onChangeParentStyle={this.onChangeStyle.bind(this)}/> 
     </div> 
    } 
} 

class Child extends React.Component { 
    onClick() { 
     this.props.onChangeParentStyle('red'); 
    } 
    render() { 
     return <span onClick={this.onClick.bind(this)} style={{background: 'white', cursor: 'pointer'}}> 
      Change parent style 
     </span> 
    } 
} 

React.render(<Parent />, document.getElementById('container')); 

Example on JSFiddle

Answer 2

：

componentWillMount(){ 
let propPlainUrl = /[a-zA-Z]+/g.exec(this.props.location.pathname); 
       this.setState({ 
        activeMenu: menuItems.indexOf(propPlainUrl[0]) + 1 
      }); 

あなたがアクティブの初期値を設定するcomponentWillMountを使用することができます選択されたルートメニューに応じたキー

上記のコードは、ホームコンポーネントの初期レンダリングで一度だけ問題を解決します しかし、コンポーネントがクリックメニューイベントで更新されている間にプロシージャを更新したままにしたい場合はどうすればいいですか？

あなたは次のようにわずかな変化で同じコードを使用することができます。

componentWillReceiveProps(nextProps){ 
    let propPlainUrl = /[a-zA-Z]+/g.exec(nextProps.location.pathname); 
    this.setState({ 
     activeMenu: menuItems.indexOf(propPlainUrl[0]) + 1 
    }); 
    } 

`` `

componentWillReceivePropsを使用すると、コンポーネントのアップデートにあなたの詳細な回答、@Alesandrため