使用react做一个户籍地下拉选择（含2020版区划户籍代码json）

前言

前段时间在做项目的时候遇到了一个需求需要做一个户籍地的三级联级下拉菜单，在这里分享一下心得，技术有限方法比较蠢

获取户籍地代码和地名

自己在网上找了一下现成的json 比较少，而且有一些比较老，所以就打算自己来了。
首先进到民政官网http://www.mca.gov.cn/article/sj/xzqh/1980/选择最新的一条之后进到这个页面

之后要把它变成json，我的方法比较蠢，ctrl+a全选复制 然后掐头去尾 只保留代码和地名 然后复制到wps的表格中 效果如下

图片的C和D是之后加的函数
编写函数在C1编写=CONCATENATE("{"“code”":""",A1,""","“name”":""",B1,"""},")下拉复制到最后一行 在D2编写 链接C的值=CONCATENATE("[",CONCAT(C1:C900),"]") 得一个区划json数组 这里出现了一个!value 经查验发现是concat这个最大只能链接962个 于是我改成只链接900个 分4次来 ctrl +c 复制单元格D1 出现虚线表示成功 之后创建一个json文件 粘贴出来得到

这个数组显然不是我们要的 因为要用antd的联级选择 所以需要一个树结构 ，可以发现这个json数组里省字段前面没有空格，市前面一个空格 ，县三个空格附代码 利用这点 编写一个js函数 把它处理成想要的树结构如下

    const toJson = () => {
        console.log(hk)//hk是引用的json数组
        let hk1 = []
        let shen = {}
        let shi = undefined
        hk.map(({code,name})=>{
            if(name.substr(0,1) != ' '){//省
                shen = {value:code,label:name,children:[]}
                hk1.push(shen)
                shi = undefined
            }
            if(name.substr(0,3) !== '   ' && name.substr(0,1) === ' '){//市
                shi = {value:code,label:name.trim(),children:[]} //trim 去除空格
                shen.children.push(shi)
            }
            if(name.substr(0,3) === '   '){//县
                if(Util.isEmpty(shi)){//没有市说明是直辖 // 这里是一个判断空值的方法 可自行编写
                    shen.children.push({value:code,label:name.trim()})//直接push到第一级下 并且去除空格
                }else{
                    shi.children.push({value:code,label:name.trim()})//第二级
                }
                
            }
        })
        console.log(hk1)
        console.log(JSON.stringify(hk1))//转json
    }

得到

最后附上 成果 我已经把上传 直接下载即可
https://download.csdn.net/download/weixin_45872877/18828594

使用这种方法 即使更新也可以快速得得到想要得json结构数据

制作下拉菜单

这里使用了 antd的 Cascader级联选择

function Cascaderhuji(props){
    const _onChange = (value)=>{
        console.log(value)
    }
    return (
        <Cascader options={hk} onChange={_onChange} placeholder="请选择"/>
    )
}

效果

结尾

如果有其它的好方法欢迎留言 json数据放在资源当中0积分下载 没有仔细核验 如果有问题欢迎留言 再次附上资源链接 https://download.csdn.net/download/weixin_45872877/18828594