多次渲染一个组件 React.js

这是一个简单计数器的代码。

但是，当我渲染视图时，我没有得到任何输出。请告诉我代码有什么问题。

按下按钮，计数器就会递增并呈现在屏幕上。

 var Title = React.createClass({

  getInitialState : function(){
    return {count:0};
  },
  increment : function(){

    this.setState({count:this.state.count+this.props.incVal});
  },
  render: function() {
    return (
      <div>
        <h1 >Count : {this.state.count}< /h1>
        <button onClick={this.increment} >Increment</button>
      </div>
    );
  }
});




var MultiButton = React.createClass({
  render : function (){
    return(
      <Title incVal={1}/>
      <Title incVal={5}/>
    );
  }
});

ReactDOM.render( <MultiButton /> ,
  document.getElementById('example')
);

来自官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html.

<div>
  Here is a list:
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

React 组件不能返回多个 React 元素，但可以返回一个 JSX 表达式可以有多个子级，所以如果你想要一个组件 要渲染多个内容，您可以将其包装在像这样的 div 中。

更改自

var MultiButton = React.createClass(
  {
    render: function () {
      return (
        <Title incVal={1}/>
        <Title incVal={5}/>
      );
    }
  }  
);

to

var MultiButton = React.createClass(
  {
    render: function () {
      return (
        <div>
          <Title incVal={1}/>
          <Title incVal={5}/>
        </div>
      );
    }
  }  
);