表格效果如图所示:
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')
);