React不会渲染第二个嵌套元素

Question

我试图在这里使用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"));

Answer 1

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