カスタムコンポジションから反応した子供にアクセスできますか？

Question

ReactJSツリーにはどれくらい深く入ることができますか？我々は最後の子に行く（や小道具を変更）するAppコンポーネントからしたい場合は、我々は例えばchildren.mapなどを使用することができます

function SplitPane(props) { 
    return (
     <OtherCompo> 
      { props.left } 
     </OtherCompo> 
    ); 
} 

function App() { 
    return (
     <SplitPane 
      left={ <Contacts /> } /> 
    ); 
} 

しかし、私の理解として、我々は唯一まで行くことができます：我々は持っているとしましょうSplitPaneコンポーネント。 props.childrenがSplitPaneのため定義されていないため、ツリー内で深く潜んではいけません。ただし、SplitPaneには子供がいます。だからAppのコンポーネントからそれらの子供たちにアクセスする方法はありますか？

Answer 1

Appコンポーネントから深い子を変更する場合は、変更が必要な問題の子に達するまで、親からすべての子にメソッドを伝播するか、または、より良い方法はReactJS Contextを使用することです。

コンテキストアプローチでは、Appコンポーネント内から子のコンテキストを宣言します。中間コンポーネントが情報の伝播を妨げることなく、最終的な子コンポーネントが宣言されたコンテキストを直接呼び出すことができます。

あなたのコードは次のようになります。

class OtherCompo extends React.Component { 
    static contextTypes = { 
     left: React.PropTypes.instanceOf(React.Component) 
    }; 

    render() { 
     return (
      <div> 
       <SomeComp /> 
       { this.context.left } 
       <SomeOtherComp /> 
      </div> 
     ); 
    } 
} 

class SplitPane extends React.Component { 
    render() { 
     return (
      <OtherCompo></OtherCompo> 
     ); 
    } 
} 

class App extends React.Component { 
    static childContextTypes = { 
     left: React.PropTypes.instanceOf(React.Component) 
    }; 

    getChildContext() { 
     return { left: <Contacts /> }; 
    } 

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