react 渲染table数据
发布时间:2020-12-15 06:51:30 所属栏目:百科 来源:网络整理
导读:表格效果如图所示: const headers=['bookName','Author','Language','Published','Sales'];const data=[ ['Tfd rod','J.F','English','1954-1955','150milion'],['Td rod','E.A','1904-1965','250milion'],['Tsc rod','S.F','1944-1987','550milion'],['Tfg
表格效果如图所示:
const headers=['bookName','Author','Language','Published','Sales'];
const data=[
['Tfd rod','J.F','English','1954-1955','150milion'],['Td rod','E.A','1904-1965','250milion'],['Tsc rod','S.F','1944-1987','550milion'],['Tfg rod','J.O','1923-1951','190milion'],['Txfe rod','U.P','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')
);
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |