如何通过 Reactjs 中的简单 for 循环进行渲染？答案

【问题标题】：how to render through a simple for-loop in Reactjs?如何通过 Reactjs 中的简单 for 循环进行渲染？
【发布时间】：2015-06-15 20:26:56
【问题描述】：

我在下面定义了一个简单的反应组件

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>
....
...

我怎样才能做到这一点？

【问题讨论】：

标签： javascript reactjs flux

【解决方案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>);
   }
});

【讨论】：

【解决方案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>;
    }
})

【讨论】：

【解决方案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>)
}


})

【讨论】：

【解决方案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>
        );
    }
});

【讨论】：