React实现疫情情况列表展示

爱被打了一巴掌 2023-03-03 06:29 2阅读 0赞

### 文章目录 ###

*   *  准备工作
     *  具体实现
     *  成果展示：

## 准备工作 ##

在前面学习了React的基础知识以后此篇博客讲解的是如何通过使用React的基础语法来模拟从后端或者是爬虫获取到**json**数据进行基础的显示，并利用公司提供的前端组件[组件地址][Link 1]进行渲染处理（组件依赖安装等查看网站有具体信息）。

Json数据可以搜索`网易疫情地图`,进入控制台点击**network**，选中**XHR**列查看数据，将整个json数据拷贝到自己的工程目录中，然后在**index.js**中进行引用：`import jsonData from './list-total.json'`。

![image-20200730144848427][]

## 具体实现 ##

import React, {  Component} from 'react';
    import ReactDOM from 'react-dom';
    import jsonData from './list-total.json'
    import {  Table } from 'tinper-bee';
    import 'bee-table/build/Table.css';
    /** * 这部分学习的是React 来展示地图信息 */
    console.log(jsonData)
    let allworldObj ={ 
        // 就是相当于先新定义一个对象。
    }
    jsonData.data.areaTree.forEach((item,i)=>{ 
        // 
        if(allworldObj[item.name]==undefined){ 
             /** * 用来判断是否真的存在 因为我们看到有些值的定义是undefined * 需要先进行一个初始化 * */
            allworldObj[item.name] ={ 
                confirm:0,
                suspect:0,
                heal:0,
                dead:0
            }
        }
       /** * 对于一些值为null的存在，也要进行初始化。 */
        item.today.confirm= item.today.confirm? item.today.confirm:0;
        item.today.suspect= item.today.suspect? item.today.suspect:0;
        item.today.heal = item.today.heal? item.today.heal: 0;
        item.today.dead=item.today.dead?item.today.dead:0;
        allworldObj[item.name] = { 
            // 对信息进行统计处理 计算： 等于当前的值加上新获取到的值。
            confirm:allworldObj[item.name].confirm+item.today.confirm,
            suspect:allworldObj[item.name].suspect+ item.today.suspect,
            heal: allworldObj[item.name].heal+ item.today.heal,
            dead: allworldObj[item.name].dead+item.today.dead
        }
    });
    let allList =[]// 定义一个空的数组
    for (const key in allworldObj) { 
        allworldObj[key].name =key
        // 将信息的名字也加载到里面
        allList.push(allworldObj[key])
    }
    allList.sort((a,b)=>{ 
        // 顺序排列 
       return   a.confirm<b.confirm?1:-1
    })
    console.log(allList)
    function ListItem(props){ 
        /** * 利用平台提供的组件 * import { Table } from 'tinper-bee'; * 导入表格信息。 * */ 
    const columns = [
        { title: "序号",dataIndex: "index",key: "index",width: 80},
        { title: "国家名称",dataIndex: "orderCode",key: "orderCode",width: 200},
        { title: "确诊人数",dataIndex: "supplierName",key: "supplierName",width: 200},
        { title: "成功治愈",dataIndex: "type_name",key: "type_name",width: 200},
        { title: "怀疑人数",dataIndex: "purchasing",key: "purchasing",width: 200},
        { title: "死亡人数：",dataIndex: "purchasingGroup",key: "purchasingGroup",width: 200},
      ];
      const data = [
        {  
          index:props.index+1,
          orderCode: props.data.name, 
          supplierName: props.data.confirm,
          type_name: props.data.heal,
          purchasing:props.data.suspect, 
          purchasingGroup:props.data.suspect,
          key:'1'
        }
      ];
        return(
            <Table 
            className="demo" 
            columns={ columns} 
            data={ data} />
        )
    }
    class Bll extends React.Component{ 
        constructor(props){ 
            super(props)
        }
        render(){ 
            let WorldList = this.props.list.map((item,index)=>{ 
                return(
                    <ListItem key ={ index} data={ item} index={ index}></ListItem>
                )
            });
            return(
                <div>
                    <h1>全球病理</h1>   
                        { WorldList}    
                </div>
            )
        }
    }   
    ReactDOM.render(
        <Bll list={ allList}/>,
        document.querySelector('#root')
    )

## 成果展示： ##

![image-20200730151708672][]

[Link 1]: http://bee.tinper.org/
[image-20200730144848427]: /images/20230208/28fe5ead021c40fda11d577431e148c0.png
[image-20200730151708672]: /images/20230208/08e59506af3c47eabfa0e83b251c72b5.png