React实现疫情情况列表展示-蒲公英云

React实现疫情情况列表展示

文章目录

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

准备工作

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

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

具体实现

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')
)