如何渲染重复的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循环，或者其他类似的方法。)
回答 2
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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25646502
复制相关文章
相似问题