ReactDOM.render預計最後的備選`callback`參數是一個函數

Question

我是新來的反應，我寫了下面的代碼，並得到

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

這是我的代碼

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

什麼我做錯了嗎？

Answer 1

您給ReactDom.render四個參數 - 三個Stats組件和元素。該函數僅在容器元素之前預期一個元素。因此，你需要以某種方式組中的元素一起，例如是這樣的：

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

需要提供一種反應元素作爲第一個參數，安裝節點作爲第二個參數準確。所以你可以做到這一點。

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