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 목적을 상쇄합니다. 이러한 하위 구성 요소에 액세스하는 일반적인 방법이 있습니까?

내가 할 노력하고있어의 거친 예 : 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

, 오히려이 모든 HOCs를 렌더링하는 부모 구성 요소에서 수행 할 수 있습니다. 필요한 것은 하위 구성 요소가 클릭되었는지 확인하고 상위 구성 요소에서 선택한 상태를 조정하기 만하면되기 때문입니다. 이 선택된 상태는 그 색인을 선택된 색인과 비교하고 이에 따라 tabIndex을 할당하는 하위 구성 요소로 다시 전파 될 수 있습니다.

onClick 이벤트 처리기를 모두 전달하여 현재 ComposedComponent가 선택되었는지 여부를 확인하려면 해당 소품을 보낼 수 있습니다. 그런 다음 하위 구성 요소에서 당신은 아이디어를 제공하는 것은 거의 의사 코드처럼

<div tabIndex={this.props.tabIndex}> </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> 
    ) 
    } 
}