前言:
这篇文章主要介绍通过传入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 (
                                <td><Checkboxtest/></td>
                                <Body body={body}/>
        } 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 ( <td><Checkboxtest/></td> <Body body={body}/> } 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> {/*这是个多选框的的组件,在使用时没有的话就注释掉*/} <td><Checkboxtest/></td> {/*title是表格的标题*/} <TableHead title={this.props.title}/> </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 ( <td><Checkboxtest/></td> <Body body={body}/> } 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> {/*这是个多选框的的组件,在使用时没有的话就注释掉*/} <td><Checkboxtest/></td> {/*title是表格的标题*/} <TableHead title={this.props.title}/> </thead> <tbody> <TableBody bodys={this.props.tableBody}/> </tbody> </table>