树形结构

组件

import React, { Component } from 'react';
import { Cascader } from 'antd';
import regionTreeData from '../config/region_tree';
import { getRegionPath } from '../lib/region_utils';

// eslint-disable-next-line
class AreaSelect extends Component {
  handleChange = (value) => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(value[value.length - 1]);
    }
  }

  render() {
    const { value, onChange, ...rest } = this.props;
    const v = getRegionPath(value);
    return (
      <Cascader
        fieldNames={{ label: 'value', value: 'key' }}
        options={regionTreeData}
        {...rest}
        value={v}
        onChange={this.handleChange}
        changeOnSelect
      />
    );
  }
}

export default AreaSelect;

regionTreeData是城市级别的json

[{"key":110000,"value":"北京市","children":[{"key":110101,"value":"东城区","children":[]},{"key":110102,"value":"西城区","children":[]},{"key":110105,"value":"朝阳区","children":[]},{"key":110106,"value":"丰台区","children":[]}......

getRegionPath方法

import regions from '../config/region';

export function getRegionPathName(regionCode) {
  if (!regionCode) return '--';
  const code = Number.parseInt(regionCode, 10);
  const path = [];
  const pCode = Number.parseInt(code / 10000, 10) * 10000;
  const pRegion = regions.find(item => item.key === pCode);
  if (pRegion) {
    path.push(pRegion);
  }

  if (code !== pCode) {
    const cCode = Number.parseInt(code / 100, 10) * 100;
    const cRegion = regions.find(item => item.key === cCode);
    if (cRegion) {
      path.push(cRegion);
    }

    if (code !== cCode) {
      const dRegion = regions.find(item => item.key === code);
      if (dRegion) {
        path.push(dRegion);
      }
    }
  }

  return path.map(item => item.value).join('') || '--';
}

export function getRegionPath(regionCode) {
  if (!regionCode) return [];
  const code = Number.parseInt(regionCode, 10);
  const path = [];
  const pCode = Number.parseInt(code / 10000, 10) * 10000;
  const pRegion = regions.find(item => item.key === pCode);
  if (pRegion) {
    path.push(pRegion);
  }

  if (code !== pCode) {
    const cCode = Number.parseInt(code / 100, 10) * 100;
    const cRegion = regions.find(item => item.key === cCode);
    if (cRegion) {
      path.push(cRegion);
    }

    if (code !== cCode) {
      const dRegion = regions.find(item => item.key === code);
      if (dRegion) {
        path.push(dRegion);
      }
    }
  }

  return path.map(item => item.key);
}

export function getRegionPathminName (regionCode) {
  const code = Number.parseInt(regionCode, 10);
  const dRegion = regions.find(item => item.key === code);
  console.log(dRegion);
  return dRegion.value ? dRegion.value : '--';
}

运用

import AreaSelect from '../../../components/area_select';
....
<FormItem {...formItemLayout} label="媒体所属地区：">
          {getFieldDecorator('mediaArea', {
            rules: [{ required: true, message: '必填' }],
          })(<AreaSelect placeholder="请选择" disabled />)}
</FormItem>