2016-08-25 11 views
1

React에서 부모/자식 관계가 어떻게 작동하는지 완전히 이해하지 못합니다. 두 개의 구성 요소, ColumnSpace이 있습니다. Column이 렌더링되면 Spaces이 생성됩니다. 나는 Column이 그 아이들 Spaces의 부모가 될 것이라고 생각했지만 틀렸거나 React.Children.count(this.props.children)의 일부분을 잘못 사용하고 있습니다. 항상 주어진 어떤 주어진 Column에는 0 명의 아이들이 있다는 것을 알려줍니다.상위 구성 요소의 하위 상태에 액세스 중입니까?

간체 모델 :

var Column = React.createClass({ 
    getInitialState: function() { 
     return {childCount: '', magicNumber: this.props.magicNumber}; 
    }, 
    componentDidMount: function() { 
     var newCount = React.Children.count(this.props.children); 
     this.setState({childCount: newCount}); 
    }, 
    render: function() { 
     return (
      <div className='Column'> 
       { 
        Array.from({ length: this.state.magicNumber }, (x,y) => <Space key={y}/>) 
       } 
      </div> 

     ); 
    } 
}); 

var Space = React.createClass({ 
    render: function() { 
     return (
      <div className="Space"> 
       space here 
      </div> 
     ); 
    } 
}); 

그것은 내가 ColumnReact.children.count(this.props.children)을 넣어 상관없이 같은 것, 그것은 나에게 말한다는 0 아이들이 있습니다. 예제 코드에서 생성 된 Column에 5 개의 자식이 포함될 것으로 예상됩니다. 그 중 5 개는 Space이기 때문에 생성됩니다.

나는 그들이 완전히로드되기 전에 나는 아이들을 계산하려고했다, 그래서 나는이 같은 클릭 핸들러 작성 시도 어쩌면 생각

:

//in Column 
setChildCount: function() { 
    var newCount = React.Children.count(this.props.children); 
    this.setState({childCount: newCount}); 
} 

그럼 내 Column이 같은 버튼을 추가 :

... 
render: function() { 
     return (
      <div className='Column'> 
       { 
        Array.from({ length: this.state.magicNumber }, (x,y) => <Space key={y}/>) 
       } 
      <button onClick={this.setChildCount} /> 
      {this.state.childCount} 
      </div> 
     ); 

하지만 내 childCount은 언제나 영원히 있습니다. 내가 잘못 가고있는 사람을 누구나 볼 수 있습니까?

편집 : 궁극적으로, 나는 Y 값으로 설정된 상태에서 X 속성을 가진 모든 하위 요소의 수를 얻고 싶습니다. 그러나 분명히 그 단계에서 3 단계 떨어져 있습니다.

답변

1

Column 구성 요소에는 해당 코드에 하위 항목이 없습니다. 자식은 부모 구성 요소로 래핑 된 구성 요소입니다. 그래서 상상 : 부모 Column 두 아이 코드에 Space

가이 경우

<Column> 
<Space/> 
<Space/> 
<Column/> 

:

 <div className='Column'> 
      { 
       Array.from({ length: this.state.magicNumber }, (x,y) => <Space key={y}/>) 
      } 
     </div> 

당신은하지 구성 요소 내부에 div 내부에 새 구성 요소를 만드는을 Column

+0

알겠습니다. 이해합니다. 내가 여기에서하려고하는 것처럼 컴포넌트가 자신의 자식을'렌더링 '할 수 있습니까, 아니면'ReactDOM.render'에서 제대로 작동 할 수 있습니까? 죄송합니다. OP에서 벗어난 것이 너무 많습니다. – souldeux

+0

반응 튜토리얼 (https://facebook.github.io/react/docs/multiple-components)에서 상위 하위 용어의 논리를 읽으십시오.html – LuisPinto

+0

하하, 고마워 - 그게 내 질문에 대한 답변이야. – souldeux

1

의 일부로 Space 구성 요소를 렌더링하고 있습니다.구성 요소. this.props.children에 의해 촬영 된 부모/자식 관계는 다음과 같습니다

var Column = React.createClass({ 
    render: function() { 
    <div className="column"> 
     {this.props.children} 
    </div> 
    } 
}); 

ReactDOM.render(
    <Column> 
    <Space /> //little space children 
    <Space /> 
    </Column> 
); 

특정 문제에 얻으려면, 당신이 당신의 렌더링 방법에 바로 모든 것을 가지고 있기 때문에 당신이하지 필요를 this.props.children 같은 아무것도.

귀하의 질문에 대한 대답은 다음과 같습니다. 렌더링 할 때와 동일한 논리를 적용하십시오.

관련 문제