React.js 命名空间组件什么也不显示答案

【问题标题】：React.js Namespaced Components show nothingReact.js 命名空间组件什么也不显示
【发布时间】：2015-08-30 15:09:37
【问题描述】：

在 React.js 官方文档中，有一个新特性：从 0.11 版本开始的命名空间组件。

REF: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')
);

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

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

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

或许，它可以得到结果。

所以，我还有一个问题。

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

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

【问题讨论】：

标签： javascript namespaces reactjs

【解决方案1】：

Mysearchpage 的渲染函数只返回一个空 div，因此您必须显式渲染其所有子组件：

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

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

【讨论】：