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

Question

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

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


}


})

渲染时，组件returnsfor循环的第一条语句(<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

您可以将所有项目推送到一个数组，然后 return 它：

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

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

how to render through a simple for-loop in Reactjs?

javascript

flux

reactjs