antd中用TreeSelect及TreeNode写一个行政区划层级树

在Antd中，我们可以使用`TreeSelect`组件及其子组件`TreeNode`来实现行政区划层级树。下面是一个示例代码：

import { TreeSelect } from 'antd';
const { TreeNode } = TreeSelect;

const treeData = [
  {
    title: '北京市',
    value: '110000',
    children: [
      {
        title: '市辖区',
        value: '110100',
        children: [
          {
            title: '东城区',
            value: '110101',
          },
          {
            title: '西城区',
            value: '110102',
          },
          {
            title: '朝阳区',
            value: '110105',
          },
          {
            title: '丰台区',
            value: '110106',
          },
          {
            title: '石景山区',
            value: '110107',
          },
          {
            title: '海淀区',
            value: '110108',
          },
          {
            title: '门头沟区',
            value: '110109',
          },
          {
            title: '房山区',
            value: '110111',
          },
          {
            title: '通州区',
            value: '110112',
          },
          {
            title: '顺义区',
            value: '110113',
          },
          {
            title: '昌平区',
            value: '110114',
          },
          {
            title: '大兴区',
            value: '110115',
          },
          {
            title: '怀柔区',
            value: '110116',
          },
          {
            title: '平谷区',
            value: '110117',
          },
        ],
      },
      {
        title: '县',
        value: '110200',
        children: [
          {
            title: '密云县',
            value: '110228',
          },
          {
            title: '延庆县',
            value: '110229',
          },
        ],
      },
    ],
  },
  // 省略其他行政区划数据
];

function renderTreeNodes(data) {
  return data.map(item => {
    if (item.children) {
      return (
        <TreeNode value={item.value} title={item.title} key={item.value}>
          {renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode value={item.value} title={item.title} key={item.value} />;
  });
}

function DistrictTreeSelect() {
  return (
    <TreeSelect
      showSearch
      style={{ width: '100%' }}
      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
      placeholder="请选择行政区划"
      allowClear
      treeDefaultExpandAll
    >
      {renderTreeNodes(treeData)}
    </TreeSelect>
  );
}

在该示例代码中，我们首先定义了一个`treeData`数组，数组中的每个元素都代表一个行政区划。每个元素中的`title`属性表示该行政区划的名称，`value`属性表示该行政区划的编码，`children`属性表示该行政区划的子区划。如果该行政区划没有子区划，则`children`属性为空数组`[]`。

接下来，我们定义了一个`renderTreeNodes`函数，该函数用于递归地渲染行政区划树的每个节点。如果当前节点有子节点，则递归地调用`renderTreeNodes`函数渲染子节点；否则，直接渲染该节点。

最后，我们定义了一个`DistrictTreeSelect`组件，该组件使用`TreeSelect`组件渲染行政区划树。在`TreeSelect`组件的子组件中，我们调用`renderTreeNodes`函数渲染每个节点。

需要注意的是，我们还对`TreeSelect`组件进行了一些配置，包括设置`showSearch`属性为`true`，表示显示搜索框；设置`dropdownStyle`属性为一个对象，表示下拉框的样式；设置`placeholder`属性为一个提示文本；设置`allowClear`属性为`true`，表示允许清空选中的值；设置`treeDefaultExpandAll`属性为`true`，表示默认展开所有节点。