关于javascript：for render in react渲染方法


For loop in react render method

本问题已经有最佳答案，请猛点这里访问。

我想为我的grid创建分页链接。我将maxPages(number)属性传递给组件，但我无法在render方法中使用。 我能做什么 ？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var Pagination = React.createClass({

render: function(){


    return(
   
        <ul class="pagination">

           
<li>
?
</li>

            {for (var i=0;i <10;i++;)
            {
              return(
<li>
i + 1
</li>
);
            }
            }

           
<li>
?
</li>

       
</ul>

    );

}});

您可以在渲染之前运行循环(请注意，for循环中存在错误)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var lis = [];

for (var i=0; i<10; i++) {
    lis.push(
<li>
{i + 1}
</li>
);
}

var Pagination = React.createClass({
    render: function(){
        return(
           
                <ul class="pagination">

                   
<li>
?
</li>

                    {lis}
                   
<li>
?
</li>

               
</ul>

           
        );
    }
});

小提琴

相关讨论

您只能将表达式嵌入JSX中。

1
2
<ul className="pagination">{children}
</ul>

转换成类似的东西

1
React.createElement('ul', {className: 'pagination'}, children);

你现在看到你怎么永远不会有一个for循环代替children？ 语句不能在函数调用表达式中。

您可以事先创建一个数组，就像adeneo在答案中所示。

相关讨论