如何通過Reactjs中的簡單for循環渲染？

Question

我有一個簡單的反應定義的組件下面

React.createClass({ 

generateContent:function(){ 

for(i = 1;i<=100;i++) 

    if(i%2 == 0) 
    { 
     return <li>Even!</li> 
    } 

else{ 

     return <li>Odd!</li> 

    } 


}, 


render:function(){ 

    return (<ul> 
       {this.generateContent()} 
      </ul>) 


} 


}) 

在呈現，該組件返回的for循環（<li>Odd</li>）的第一條語句，然後退出。

我想是這樣

<li>Odd</li> 
<li>Even</li> 
<li>Odd</li> 
<li>Even</li> 
.... 
... 

我怎樣才能做到這一點？

Answer 1

你需要給它的所有推到一個數組：

React.createClass({ 
    generateContent: function() { 
     var html = []; 

     for(i = 1;i<=100;i++) { 
      if(i%2 == 0) { 
       html.push(<li>Even!</li>); 
      } else { 
       html.push(<li>Odd!</li>); 
      }   
     } 

     return html; 
    }, 
    render: function() { 
     return (<ul> 
      {this.generateContent()} 
     </ul>); 
    } 
}); 

Answer 2

您可以把所有項目到一個數組，然後返回它：

React.createClass({ 

generateContent:function(){ 
    var list = []; 
    var content = ['Even!','Odd!']; 
    for(i = 1;i<=100;i++){ 
     list.push(<li>{content[i%2]}</li>) 
    } 

    return list;  
}, 


render:function(){ 

    return (<ul> 
       {this.generateContent()} 
      </ul>) 
} 


}) 

Answer 3

當你調用generateContents()，你在第一次迭代時返回，所以你只能得到一個<li>。 您應該創建一個元素列表 - 當它到達<= 100時，循環將終止。

http://output.jsbin.com/jomiqututo

例如：

var MyComponent = React.createClass({ 
    generateContent: function() { 
     var html = []; 
     for(var i = 1; i <=100; i++) { 
      if(i % 2 === 0) { 
       html.push('<li>Even</li>'); 
      } else { 
       html.push('<li>Odd</li>'); 
      } 
     } 
     return html; 
    }, 
    render: function() { 
     return (
      <ul>{this.generateContent()}</ul> 
     ); 
    } 
}); 

Answer 4

React.createClass({ 

    render: function(){ 
     var html = []; 
     for (var i = 1; i <= 100; i++) { 
      if (i % 2 === 0) { 
       html.push(<li key={i}>Even</li>); 
      } else { 
       html.push(<li key={i}>Odd</li>); 
      } 
     } 

     return <ul>{html}</ul>; 
    } 
})