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

与单纯用 div 的区别在哪里?

Answer 1

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

Answer 2

你是期望给 MysearchPage 传入子组件，但是 MysearchPage 又没有通过 this.props.children 来获取子组件。
所以问题就在 MysearchPage 的 render() 没写对。 参照 @yywl 的写法即可。