怎么用react画一个表格
使用react输出一个表格可以使用使用map循环数据,进行输出,
1、新建一个Exce组件;
2、组件内使用map对表格头进行循环输出;
3、对存放表格数据的数组进行循环输出;
4、在render函数中调用组件即可。
具体代码如下:
(相关课程推荐:es6入门教程)
const headers=['bookName','Author','Language','Published','Sales']; const data=[ ['Tfd rod','J.F','English','1954-1955','150milion'], ['Td rod','E.A','English','1904-1965','250milion'], ['Tsc rod','S.F','English','1944-1987','550milion'], ['Tfg rod','J.O','English','1923-1951','190milion'], ['Txfe rod','U.P','English','1914-1947','230milion'] ]; class Excel extends React.Component{ render(){ return ( <div> <table className='tabel' border="2"> <thead className='theads' onClick={this.sort}> <tr> { this.props.headers.map((head,index)=> <th key={index}>{head}</th> ) } </tr> </thead> <tbody> { this.props.data.map((row,index)=>{ return (<tr key={index}> { row.map((cell,index)=>{ return <td >{cell}</td> }) } </tr> ) }) } </tbody> </table> </div> ); } } ReactDOM.render( <div> <Excel headers={headers} data={data}/> </div>, document.getElementById('app') );
效果:
更多React相关技术文章,请访问React答疑栏目进行学习!
以上就是怎么用react画一个表格的详细内容,更多请关注0133技术站其它相关文章!