Javascript 反应不'；t呈现第二个嵌套元素

我试图在这里使用react嵌套元素，但无法渲染第三个元素。前两个react子元素工作正常，但第二个嵌套元素不渲染？为什么会这样？我该如何解决这个问题

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"));

var Nested=React.createClass({
render:function（）{
返回(
嵌套div
)
}     
});
var Component=React.createClass({
render:function（）{
返回(
//这不想渲染
);
}
});
ReactDOM.render(
,
document.getElementById（“app”）；

如果希望自定义组件渲染嵌套组件或元素，在自定义组件的渲染方法中使用{this.props.children}将允许您执行此操作。

如果希望自定义组件渲染嵌套组件或元素，请使用{this.props.children}在自定义组件的渲染方法中将允许您这样做