React에서 부모/자식 관계가 어떻게 작동하는지 완전히 이해하지 못합니다. 두 개의 구성 요소, Column
및 Space
이 있습니다. 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>
);
}
});
그것은 내가 Column
에 React.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 단계 떨어져 있습니다.
알겠습니다. 이해합니다. 내가 여기에서하려고하는 것처럼 컴포넌트가 자신의 자식을'렌더링 '할 수 있습니까, 아니면'ReactDOM.render'에서 제대로 작동 할 수 있습니까? 죄송합니다. OP에서 벗어난 것이 너무 많습니다. – souldeux
반응 튜토리얼 (https://facebook.github.io/react/docs/multiple-components)에서 상위 하위 용어의 논리를 읽으십시오.html – LuisPinto
하하, 고마워 - 그게 내 질문에 대한 답변이야. – souldeux