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在您的自定義組件的渲染方法可以讓你做到這一點。