React 結合ant-mobile 省市區級聯

import {Picker} from 'antd-mobile' import React from 'react'
 
const CustomChildren = props => ( <div onClick={props.onClick} style={{ backgroundColor: '#fff', paddingLeft: 15 }} >
        <div className="test" style={{ display: 'flex', height: '45px', lineHeight: '45px',position:'relative',borderBottom:0 }}>
            <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
            <div style={{ textAlign: 'right', color: '#888', marginRight: 15 }}>{props.extra}</div>
        </div>
    </div> ); export default class extends React.Component { constructor(props){ super(props); this.state={ pickerValue: [], }; } render(){ let antdDistrict =[]; let districtData = require('./location'); Object.keys(districtData).forEach((index)=>{ let itemLevel1 ={}; let itemLevel2 ={}; itemLevel1.value = districtData[index].code; itemLevel1.label = districtData[index].name; itemLevel1.children = []; let data = districtData[index].cities; Object.keys(data).forEach((index)=>{ itemLevel2.value = data[index].code; itemLevel2.label = data[index].name; itemLevel2.children = []; let data2 = data[index].districts; let itemLevel3 ={}; itemLevel3.children = []; Object.keys(data2).forEach((index)=>{ itemLevel3.value = index; itemLevel3.label = data2[index]; itemLevel2.children.push(itemLevel3); itemLevel3 ={}; }); itemLevel1.children.push(itemLevel2); itemLevel2 ={}; }); antdDistrict.push(itemLevel1) }); console.log(antdDistrict); return ( <div>
                <Picker title="選擇地區" extra="請選擇(可選)" data={antdDistrict} value={this.state.pickerValue} onChange={v => this.setState({ pickerValue: v })} onOk={v => this.setState({ pickerValue: v })} onClick={()=>{console.log('xx')}} >
                    <CustomChildren>Customized children</CustomChildren>
                </Picker>
            </div> ) } }