最近为了实现将从网络获取的json数据呈现了table中,做了几种尝试,最后确定了一种方案,即map解析获得的网络数据,将需要的data值丢到状态机state中,然后在呈现部分引用antd中的table,这样便达到了需要的效果。
1、呈现结果
2、普通用法
table的普通用法可以参考antd中table的用法:
https://ant.design/components/table-cn/。
这里粘出我跑出来的代码以及部分模块的说明。
import React, { Component } from 'react';
import { Table } from 'antd'
//引入antd样式,否则数据呈现便没有样式
import 'antd/dist/antd.css';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
//用状态机来控制呈现的header
columns:[{
title: '学号',
dataIndex: 'num',
key: 'num',
}, {
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '性别',
dataIndex: 'sex',
key: 'sex',
}],
//用状态机来控制呈现的数据
dataSource: [{
key: '1',
num:'2014669',
name: '张三',
sex: '男',
}, {
key: '2',
num:'2014670',
name: '李四',
sex: '男',
}]
}
}
render() {
return (
<Table dataSource={this.state.dataSource} columns={this.state.columns} showHeader={true} pagination={false} size="middle" />
)
}
}
3、网络获取数据json数据table呈现
代码与上面代码没有什么差别,但是多了一步在componentWillMount中模拟从网络获取的数据,此时需要对网络获取的数据进行解析,丢到dataSource中,在render中引用this.state.dataSource进行呈现。
//引用同上
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
……
dataSource: []
}
}
componentWillMount() {
//模拟获取的网络数据,数据如下
const data = [{
num: '2014669',
username: '张三',
usersex: '男'
}, {
num: '2014670',
username: '李四',
usersex: '男',
}, {
num: '2014671',
username: '翠花',
usersex: '女',
}, {
num: '2014672',
username: '朵儿',
usersex: '女',
}];
//对模拟的网络数据进行解析,丢到datasource中
data.map((v,i)=>{
this.state.dataSource.push({
key:'i',
num:v.num,
name:v.username,
sex:v.usersex
})
})
}
render() {
return (
<Table dataSource={this.state.dataSource} columns={this.state.columns} showHeader={true} pagination={false} size="middle" />
)
}
}
4、总结
table对于呈现相对来说比较大的数据量还是挺美观和规整的,而且只要数据格式对了,只引用Table标签就可以对数据进行呈现了。这篇博客主要目的是为了模仿数据从网络获取,在table中进行呈现,希望这篇博客对你有所帮助。