前言：
这篇文章主要介绍通过传入gson文件的路径和表格的标题栏，自动生成以个表格
在做这个组件和使用这个组件之前，需要知道几个知识点
1、map方法只能遍历数组
json文件是将对象存到数组中，所以在获取到文件中的数据是一个数组，在第一次可以通过map方法遍历解析出来就是每一行的数据，然后遍历出的结果是一个对象，这个对象就是每个单元格的数据了，因为是对象，所以就不能通过map方法遍历，需要将对象通过for的方式遍历出来存进数组，然后返回出去
//map只能遍历数组，如果是集合需要转换成数组然后遍历
let result = [];//定义数组
let idx = 0;//定义自增变量，用于数组存储数据
//循环遍历对象，将数据存进数组
for (let key in this.props.body) {
result[idx] = (<td>{this.props.body[key]}</td>);
idx++;
}
return result;
2、props和state属性的使用
这两个属性我在使用的时候也出现了错误，导致运行时抛出"map is not function"这个错误。
在外部调用这个组件时，如果传入了参数，则通过props去接收这个参数
在内部定义了属性，通过state去使用定义的属性
3、axios组件是异步获取数据
简单的说，就是通过去获取给定的json文件去获取文件中的数据类似于ajax。axios是异步获取数据，需要先判断从json获取的数据是否为空，如果为空则返回空行防止抛出错误，所以在使用axios时建议加一个判断语句
if (this.props.bodys) {
return (
this.props.bodys.map(body => {
return (
<tr>
<td><Checkboxtest/></td>
<Body body={body}/>
</tr>
);
}
)
);
} else {
return (<tr></tr>);
}
示例代码展示：
/**
* 通过传入json文件的路径和表格的标题的数组生成表格
*/
import React from 'react';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css';
import Checkboxtest from "./checkbox";
/**
* 表头的插件
* title 表格标题的数组
*/
class TableHead extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
this.props.title.map((val) => {
return (
<td>{val}</td>
);
})
);
}
}
/**
* 遍历json文件数组中存的对象，将对象村进数组
*/
class Body extends React.Component {
render() {
//map只能遍历数组，如果是集合需要转换成数组然后遍历
let result = [];//定义数组
let idx = 0;//定义自增变量，用于数组存储数据
//循环遍历对象，将数据存进数组
for (let key in this.props.body) {
result[idx] = (<td>{this.props.body[key]}</td>);
idx++;
}
return result;
}
}
/**
* 解析表格身体部分的组件
*/
class TableBody extends React.Component {
render() {
//axios是异步获取数据，需要先判断从json获取的数据是否为空
//如果为空则返回空行防止抛出错误
if (this.props.bodys) {
return (
this.props.bodys.map(body => {
return (
<tr>
<td><Checkboxtest/></td>
<Body body={body}/>
</tr>
);
}
)
);
} else {
return (<tr></tr>);
}
}
}
export default class TableDisplay extends React.Component {
constructor(props) {
super(props);
this.state = {
bodys: [],
}
}
render() {
return (
<table className="table table-striped table-hover table-bordered">
<thead>
<tr>
{/*这是个多选框的的组件，在使用时没有的话就注释掉*/}
<td><Checkboxtest/></td>
{/*title是表格的标题*/}
<TableHead title={this.props.title}/>
</tr>
</thead>
<tbody>
<TableBody bodys={this.state.bodys}/>
</tbody>
</table>
);
}
// 加载数据
componentDidMount() {
const _this = this;
//path是json文件所在的路径
axios.get(this.props.path).then((response) => {
_this.setState({
bodys: response.data,
});
});
}
}
2019年12月19日更新
前后端整合后，前端通过ajax请求获取到表格数据的集合，将集合传入次组件中生成表格
传数据的方法请参考文章(链接地址)
/**
* 通过传入集合和表格的标题的数组生成表格
*/
import React from 'react';
import Checkboxtest from "./checkbox";
/**
* 表头的插件
* title 表格标题的数组
* tableBody 表格数据的集合
*/
class TableHead extends React.Component {
constructor(props) {
super(props);
}
render() {
if (this.props.title) {
return (
this.props.title.map((val) => {
return (
<td>{val}</td>
);
})
);
} else {
return (
<td></td>
);
}
}
}
/**
* 遍历json文件数组中存的对象，将对象村进数组
*/
class Body extends React.Component {
render() {
//map只能遍历数组，如果是集合需要转换成数组然后遍历
let result = [];//定义数组
let idx = 0;//定义自增变量，用于数组存储数据
//循环遍历对象，将数据存进数组
for (let key in this.props.body) {
result[idx] = (<td>{this.props.body[key]}</td>);
idx++;
}
return result;
}
}
/**
* 解析表格身体部分的组件
*/
class TableBody extends React.Component {
render() {
//axios是异步获取数据，需要先判断从json获取的数据是否为空
//如果为空则返回空行防止抛出错误
if (this.props.bodys) {
return (
this.props.bodys.map(body => {
return (
<tr>
<td><Checkboxtest/></td>
<Body body={body}/>
</tr>
);
}
)
);
} else {
return (<tr></tr>);
}
}
}
export default class TableDisplay extends React.Component {
constructor(props) {
super(props);
this.state = {
bodys: [],
}
}
render() {
return (
<table className="table table-striped table-hover table-bordered text-center">
<thead>
<tr>
{/*这是个多选框的的组件，在使用时没有的话就注释掉*/}
<td><Checkboxtest/></td>
{/*title是表格的标题*/}
<TableHead title={this.props.title}/>
</tr>
</thead>
<tbody>
<TableBody bodys={this.props.tableBody}/>
</tbody>
</table>
);
}
}
