Reactコンポーネントのサブコンポーネントにアクセスする方法はありますか？

Question

は、だから私は、あなたがthis.props.childrenとコンポーネントの子にアクセスできることを知っている：私はボブとサリーに興味があるんだけど、あれば素晴らしいです

<MyComponent> 
    <span>Bob</span> 
    <span>Sally</span> 
</MyComponent> 

私はMyComponentを構成するコンポーネント（と対話したい場合すなわちSubcomp1およびSubcomp2）？

render: function() { 
    return (
    <div className="my-comp"> 
     <Subcomp1 /> 
     <Subcomp2 /> 
    </div> 
); 
}, 

ユースケース私はタブインデックスを管理し、より高次のコンポーネントを作成しようとしてい

（ロービングタブインデックス：https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex）包まれたコンポーネントのサブコンポーネントの、それは素晴らしいことだので、ラップされたコンポーネントへの参照を取得し、そのコンポーネントをサブタイプ別にフィルタリングできるかどうか。

これまで可能だった唯一のアプローチは、各コンポーネントにそれぞれのサブコンポーネントの参照を格納させることですが、これは面倒であり、HOCの目的を捨てるものです。これらのサブコンポーネントにアクセスする一般的な方法はありますか？

私が何をしようとしているのラフ例：

var HOC = (ComposedComponent) => { 

    return React.createClass({ 

    componentDidMount: function() { 
     const subComponents = this.composedComponent.subComponents; // Something like this would be nice 

     const menuItems = subComponents.filter(() => { 
     // figure out a way to identify components of a certain type 
     }); 

     this.applyRovingTabIndex(menuItems); 
    }, 

    render: function() { 
     return (
     <ComposedComponent 
      ref={(c) => { this.composedComponent = c }} 
      {...this.props} /> 
    ); 
    } 

    }); 
}; 

Answer 1

tabIndex操作ではなく、それはすべてのHOCsをレンダリングする親コンポーネントで行うことができ、HOCで行われる必要がありません。必要なのは、どのサブコンポーネントがクリックされたかを判断し、Parentコンポーネントで選択した状態を調整することだけです。この選択された状態は、そのインデックスを選択されたインデックスと比較し、それに応じてtabIndexを割り当てるサブコンポーネントに伝搬されます。

onClickイベントハンドラをすべて渡すことによって、現在のComposedComponentが選択されているかどうかを判断するためにそれぞれの小道具を送信できます。次に、あなたのサブコンポーネントでは、あなたのアイデアを与えるために、ほとんどの擬似コードのように

<div tabIndex={this.props.tabIndex}> </div>

コードは以下であるとして、あなたの親のdivをthis.props.tabIndexを使用してtabIndexにアクセスし、レンダリングすることができます。あなたは、これはあなたの要件を解決していないと感じる場合は、タブの例を試してみることができますので、このリンクで素晴らしい開発者によってCODEPEN EXAMPLE

const HOC = (ComposedComponent) => { 
    return class extends React.Component { 
    render (
     <ComposedComponent 
     tabIndex={this.props.selected === this.props.index ? "0" : "-1"} 
     {...this.props} 
     /> 
    ) 
    } 
} 

class Parent extends React.Component { 
    state = { 
    selected: 0 
    } 

    // Set the current selection based on the currentSelection argument 
    // that is bound to the function as it is sent along to Props 
    adjustTabIndices = (currentSelection) => (event) => { 
    this.setState({selection: currentSelection}) 
    } 

    render { 
    return (
     <div> 
     { 
      // These are your various MenuItem components that 
      // you want to compose using HOC 
      [MenuItem1, MenuItem2, MenuItem3].map(index => { 
      const MenuItem = HOC(MenuItem1); 
      return (
       <MenuItem 
       key={index} 
       onClick={this.adjustTabIndices(index)} 
       selection={this.state.selected} 
       index={index} 
       /> 
      ) 
      }) 
     }  
     </div> 
    ) 
    } 
}