如何通過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({

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

Answer 3

您可以將所有項目推入數組，然后返回它：

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 4

調用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>
        );
    }
});