React.js命名空间组件什么都不显示

Question

在官方文档React.js中，有一个新功能：版本0.11的命名空间组件。

参考： http : //facebook.github.io/react/docs/jsx-in-depth.html

var Form = MyFormComponent;

var App = (
  <Form>
    <Form.Row>
      <Form.Label />
      <Form.Input />
    </Form.Row>
  </Form>
);

var MyFormComponent = React.createClass({ ... });
MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

因此，我将其引用并编写以下代码以创建组件

var MysearchPage=React.createClass({
  render:function(){
    return (
      <div>
      </div>
    );
  }
});
MysearchPage.Title=React.createClass({
  render:function(){
    return (
      <h1>MysearchPage!</h1>
    );
  }
});
MysearchPage.Search= React.createClass({
  render:function(){
    return (
      <div>
        {this.props.searchType}:<input type="text"/>
        <button>Search</button>
      </div>
    );
  }
});
var SearchPage=MysearchPage;

var App=(
    <SearchPage>
      <SearchPage.Title />
      <SearchPage.Search searchType="Content"/>
   </SearchPage>
);
React.render(
  App,
  document.getElementById('nuno')
);

最后，没有错误消息，但是什么也不显示，我看不到结果。我想知道为什么它什么也不显示，错误在哪里。

我猜“ SearchPage.Title”节点不会追加到“ SearchPage”。 因为我更改了代码：

   var App=(
       <div>
           <SearchPage.Title />
           <SearchPage.Search searchType="Content"/>
       </div>
   );

也许可以取得结果。

所以，我还有另一个问题。

var MysearchPage=React.createClass({
        render:function(){
            return (
                <div>
                </div>
            );
        }
    });

上面的代码和纯HTML标签有什么区别？ 谢谢！

Answer 1

Mysearchpage的render函数仅返回一个空的div，因此您必须显式呈现其所有子组件：

render:function(){
    return (
      <div>
          {this.props.children}
      </div>
    );

参见https://facebook.github.io/react/docs/multiple-components.html