Я написал код для рендеринга повторяющихся элементов в 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
в код шаблона или какой-то подобный подход.)