循环添加组件在reactjs中

Question

如何在循环中添加组件卡？ 如何以正确的方式做到这一点？ 这里https://jsfiddle.net/oL1gawfo/

... 
     for(let i=1;i<5,i++){ 
      var colorhex="#FFA"+i+"56"; 
      ReactDOM.render(
      <div> 
       <Card color=colorhex/> 
      </div>, 
      document.querySelector("#c"+i) 
     ); 
     } 
    ... 

Answer 1

我刚刚找到另一种方式。

var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", 
       "#85FFC7", "#297373", "#FF8552", "#A40E4C"]; 

var renderData = []; 

for (var i = 0; i < colors.length; i++) { 
    renderData.push(<Circle bgColor={colors[i]}/>); 
} 

ReactDOM.render(
    <div> 
    {renderData} 
    </div>, 
    destination 
); 

Answer 2

所有snipet你的语法for循环是不正确。您需要;来分隔for循环的表达，而不是一个comma

for(let i=1;i<5;i++){ 

     var colorhex="#FFA"+i+"56"; 
     console.log(colorhex); 
     ReactDOM.render(
     <div> 
      <Card color={colorhex}/> 
     </div>, 
     document.querySelector("#c"+i) 
    ); 
    } 

JSFIDDLE