在 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 的区别在哪里?