Question

在官方文档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')
);

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

我猜＆＃34; SearchPage.Title＆＃34;节点不会附加到＆＃34; SearchPage＆＃34;。因为我改变了代码：

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

也许，它可以得到结果。

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

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

上述代码与纯HTML标记有什么区别？ 谢谢！

Answer 1

Mysearchpage的渲染函数只返回一个空div，所以你必须显式渲染它的所有组件子元素：

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

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

React.js Namespaced组件什么都没有显示

1 个答案: