コンポーネントを複数回レンダリングする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

に変更します。複数の要素を持っている以下のラファエル正解ほか

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> 

Aは、コンポーネントが要素を複数のリアクト返すことはできません反応するが、単一 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') 
);