React는 두 번째 중첩 된 요소를 렌더링하지 않습니다.

Question

중첩 된 요소를 여기에서 사용하려고하지만 세 번째 요소를 렌더링 할 수 없습니다. 처음 두 반응 하위 요소는 완벽하게 작동하지만 두 번째 중첩 요소는 렌더링되지 않습니까? 왜 이렇게이다? 이 문제를 어떻게 해결해야합니까?

var Nested=React.createClass({ 
     render: function(){ 
     return(
      <div className="second">nested div</div> 
     ) 
     }  
    }); 

    var Component=React.createClass({ 
     render: function(){ 
     return(

      <div className={this.props.className}> 
      <Nested> 
       <Nested/> //this doesn't want to render 
      </Nested> 
      <Nested/> 
      </div> 

      ); 
     } 
    }); 
    ReactDOM.render(
    <div> 
    <Component/> 
    </div>, 
    document.getElementById("app")); 

Answer 1

당신은 사용자 정의 구성 요소는 당신이 그렇게 할 수 있도록 사용자 정의 구성 요소의 렌더링 방법에 중첩 된 구성 요소 또는 요소, {this.props.children}를 사용를 렌더링합니다.