ReactDOM.renderは、私が反応する新しいです

Question

関数であることが、最後のオプション `callback`引数を期待し、私は以下のコードを書き、これが

var Stats = React.createClass({ 
    render: function() { 
     return (
      <article className="col-md-4"> 
       <article className="well"> 
        <h3>{this.props.value}</h3> 
        <p>{this.props.label}</p> 
       </article> 
      </article> 
     ) 
    } 
}); 

ReactDOM.render(
    <Stats value={"255.5K"} label={"People engaged"}/>, 
    <Stats value={"5K"} label={"Alerts"}/>, 
    <Stats value={"205K"} label={"Investment"}/>, 
    document.getElementById('stats') 
); 

私のコードです

ReactDOM.render Expected the last optional `callback` argument to be a function. `Instead received: Object` 

を得たもの私は間違っている？

Answer 1

ReactDom.renderには、4つの引数、つまり3つのStatsコンポーネントと要素が指定されています。この関数は、コンテナ要素の前に1つの要素しか必要としません。したがって、あなたが一緒に要素何とかグループに必要な、このような例：

ReactDOM.render(
    <div> 
    <Stats value={"255.5K"} label={"People engaged"}/> 
    <Stats value={"5K"} label={"Alerts"}/> 
    <Stats value={"205K"} label={"Investment"}/> 
    </div>, 
    document.getElementById('stats') 
); 

Answer 2

あなたは最初の引数として反応する要素を提供し、正確 2番目の引数としてノードを実装する必要があります。あなたはこれを行うことができます。

const LotsOfStats = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <Stats value={"255.5K"} label={"People engaged"}/> 
       <Stats value={"5K"} label={"Alerts"}/> 
       <Stats value={"205K"} label={"Investment"}/> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <LotsOfStats />, 
    document.getElementById('stats') 
);