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

成果展示：