多次渲染組件React.js

Question

這是一個簡單計數器的代碼。

但是，當我渲染視圖我沒有得到任何輸出。請告訴我代碼有什麼問題。

該按鈕被按下，計數器遞增並呈現在屏幕上。

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

Answer 1

您不能返回從陣營級以上的元素。如果你有一個以上的元素在一個單一的div包裹他們像

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

Answer 2

來自official documentation。

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

一個陣營組件不能返回多個反應的元素，但單一的 JSX表達可以有多個孩子，所以如果你想要一個組件 呈現多事情，你可以像一個div把它包這個。

從

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

更改爲

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

Answer 3

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.bind(this)} >Increment</button> 
     </div> 
    ); 
    } 
}); 




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

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