使用 react 输出一个表格可以使用使用 map 循环数据, 进行输出,
1, 新建一个 Exce 组件;
2, 组件内使用 map 对表格头进行循环输出;
3, 对存放表格数据的数组进行循环输出;
4, 在 render 函数中调用组件即可.
具体代码如下:
- (相关课程推荐: es6 入门教程 https://www.html.cn/js/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')
- );
效果:
来源: http://www.css88.com/qa/react/14244.html