javascript - Javascript - 如何渲染重复的React元素?

我已经编写了一些代码来呈现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循环,或者类似的方法。),

时间:

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

(另外:请记住向循环内部呈现的组件添加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);


 })


 )


 );


 })


 )


 )


 );


} 



这个有一个使用ES6箭头语法的稍微简洁的变量。


{this.props.titles.map(title =>


 <th key={title}>{title}</th>


)}



它的优点是JSX部分是隔离的(没有return或;),因此更容易绕过它。


<table>


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


</table>



另一种方法是通过数组fill()


<table>


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


</table>



嵌套节点:


 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'))
td{ border:1px solid silver; padding:1em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<main></main>


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

这就是imo最优雅的方式(使用ES6)。


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


<Somecomponent/>


)



...