如何渲染重复的React元素？
如何渲染重复的React元素？
提问于 2014-09-03 22:07:36
我写了一些在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>
);
} 有没有更好的方法来实现这一点？
(我想在模板代码中嵌入for循环，或者其他类似的方法。)
回答 3
Stack Overflow用户
发布于 2016-11-02 21:25:28
为了扩展Ross Allen的答案，这里有一个使用ES6箭头语法的更简洁的变体。
{this.props.titles.map(title =>
<th key={title}>{title}</th>
)}它的优点是JSX部分是隔离的(没有return或;)，更容易在它周围放置一个循环。
Stack Overflow用户
发布于 2017-10-12 17:13:43
这是最优雅的方式(使用ES6)。使用7个索引实例化您的空数组，并在一行中映射：
Array.apply(null, Array(7)).map((i)=>
<Somecomponent/>
)Stack Overflow用户
发布于 2014-09-04 03:22:07
本着函数式编程的精神，让我们通过使用抽象使我们的组件更容易使用。
// 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>
);
}除了我们的map2d，还有一种替代方法，那就是使用currying地图功能，但人们倾向于避免使用currying功能。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25646502
复制相关文章
相似问题