Redux를 사용하여 상위 구성 요소의 하위 구성 요소를 읽는 중

Question

구성 요소 인 Parent를 가져 와서 다른 구성 요소 인 Child를 주입합니다.

class Parent extends Component { 
render(){ 
    //something like this 
    <div className={this.props.children.foo}> 
     {this.props.children} 
    </div> 
} 

@edit

후 :

이

function mapStateToProps(state) { 
    return { 
    foo : 'some-value' 
    } 
} 

내가 요소 그런 부모에 foo으로 접근하고 싶습니다 :

아이는 다음과 같이 정의 소품을 가지고 이것을 사용하여 React.Children.toArray 나는 자식을 배열로 가져 왔고 forEach -it입니다.

그러나 소품은 child.props에 없습니다.

누락 된 것이 있습니다. 누구나 아이디어가 있으십니까? 그것은

render() { 
    this.props.children.forEach((component) => { 
    console.log(component.props.foo); 
    }) 

    return ...; 
} 

에 루프가 this

Answer 1

당신이해야 할 것은 단일 노드 또는 여러 노드가 될 수 있습니다. 단일 노드 인 경우 props에 직접 액세스하고 map을 사용하여 하위 노드를 반복하고 porps을 반환합니다.

희망이 도움이됩니다.

render() { 
    const childProps = ! this.props.children instanceof Array 
    ? this.props.children.props.foo //returns foo if child is a single node 
    : this.props.children.map(child => child.props.foo) // returns array of foo if children is a multiple nodes. 

    console.log(childProps) 

    return ...; 
} 

Answer 2

당신의 아이들을 봐 this.props.children 여러 구성 요소가 될 수