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 네 개의 인수 - 세 개의 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') 
);