关于javascript：如何渲染重复的React元素？

How can I render repeating React elements?

我写了一些代码来渲染ReactJS中的重复元素，但我讨厌它是多么丑陋。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

render: function(){
var titles = this.props.titles.map(function(title) {
return <th>{title}</th>;
});
var rows = this.props.rows.map(function(row) {
var cells = [];
for (var i in row) {
cells.push(<td>{row[i]}</td>);
}
return <tr>{cells}</tr>;
});
return (
<table className="MyClassName">
<thead>
<tr>{titles}</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}

有没有更好的方法来实现这一目标？

(我想在模板代码中嵌入for循环，或者类似的方法。)

相关讨论

您可以将表达式放在大括号内。请注意，在编译的JavaScript中，为什么在JSX语法中永远不可能有for循环; JSX相当于函数调用和含糖函数参数。只允许表达式。

(另外：请记住将key属性添加到循环内呈现的组件中。)

JSX + ES2015：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

render() {
return (
<table className="MyClassName">
<thead>
<tr>
{this.props.titles.map(title =>
<th key={title}>{title}</th>
)}
</tr>
</thead>
<tbody>
{this.props.rows.map((row, i) =>
<tr key={i}>
{row.map((col, j) =>
<td key={j}>{col}</td>
)}
</tr>
)}
</tbody>
</table>
);
}

JavaScript的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

render: function() {
return (
React.DOM.table({className:"MyClassName"},
React.DOM.thead(null,
React.DOM.tr(null,
this.props.titles.map(function(title) {
return React.DOM.th({key: title}, title);
})
)
),
React.DOM.tbody(null,
this.props.rows.map(function(row, i) {
return (
React.DOM.tr({key: i},
row.map(function(col, j) {
return React.DOM.td({key: j}, col);
})
)
);
})
)
)
);
}

相关讨论

为了扩展Ross Allen的答案，这里有一个使用ES6箭头语法的略微更清晰的变体。

1
2
3

{this.props.titles.map(title =>
<th key={title}>{title}</th>
)}

它的优点是JSX部分是隔离的(没有return或;)，因此更容易围绕它进行循环。

浅(通过数组from()：

1
2
3

<table>
{ Array.from({length:3}, (value, index) => <tr key={value.id} />) }
</table>

另一种方法是通过Array fill()：

1
2
3

<table>
{ Array(3).fill(<tr />) }
</table>

嵌套节点：

1
2
3
4
5
6
7
8
9
10
11
12
13

var table = (
<table>
{ Array.from(Array(3)).map((tr, tr_i) =>
<tr>
{ Array.from(Array(4)).map((a, td_i, arr) =>
<td>{arr.length * tr_i + td_i + 1}</td>
)}
</tr>
)}
</table>
);

ReactDOM.render(table, document.querySelector('main'))

1	td{ border:1px solid silver; padding:1em; }

1
2
3

相关讨论

本着函数式编程的精神，让我们通过使用抽象使我们的组件更容易使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// converts components into mappable functions
var mappable = function(component){
return function(x, i){
return component({key: i}, x);
}
}

// maps on 2-dimensional arrays
var map2d = function(m1, m2, xss){
return xss.map(function(xs, i, arr){
return m1(xs.map(m2), i, arr);
});
}

var td = mappable(React.DOM.td);
var tr = mappable(React.DOM.tr);
var th = mappable(React.DOM.th);

现在我们可以像这样定义渲染：

1
2
3
4
5
6
7
8

render: function(){
return (
<table>
<thead>{this.props.titles.map(th)}</thead>
<tbody>{map2d(tr, td, this.props.rows)}</tbody>
</table>
);
}

jsbin

我们map2d的替代方案是一个咖喱的地图功能，但人们往往会回避干扰。

相关讨论

这是imo最优雅的方式(使用ES6)。使用7个索引实例化空数组并将其映射到一行：

1
2
3

Array.apply(null, Array(7)).map((i)=>
<Somecomponent/>
)

荣誉

Create loop inside React JSX

相关讨论