如何渲染重复元素？

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

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

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

（我想在模板代码中embedded循环，或者类似的方法）。

Answer 1

你可以把expression式放在大括号内。 注意在编译的JavaScript中为什么在JSX语法里永远不可能有for循环; JSX相当于函数调用和加糖函数参数。 只有expression式是允许的。

（另外：记得要将key属性添加到循环内部呈现的组件中。）

JSX + ES2015 ：

 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 ：

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

Answer 2

为了扩展Ross Allen的答案，这里是一个使用ES6箭头语法的更简洁的变体。

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

它具有JSX部分隔离（不return或; ）的优点，使得更容易在其周围进行循环。

Answer 3

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

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

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

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

jsbin

---

我们的map2d的替代scheme将是一个咖喱地图function，但人们往往会回避currying。

Answer 4

这是imo，最优雅的方法（使用ES6）。 用7个索引实例化空数组，并映射成一行：

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

荣誉https://php.quicoto.com/create-loop-inside-react-jsx/