react-antd级联选择框（后台数据渲染）

1、默认效果

2、这里我们需要实现的是二级级联选择。
官方实例给的数组结构是这样的

所以我们也要将后台返回的数据构造成这样既可。

    const classGradesData = [];
    singleClassList &&
      singleClassList.forEach(item => {
        const children = [];
        //这里是生成children的数据结构
        item.classList.forEach(classListItem => {
          children.push({
            value: classListItem.classId,
            label: classListItem.className,
          });
        });
        const newClassData = {
          value: item.gradeName,
          label: item.gradeName,
          children,
        };
        return classGradesData.push(newClassData);
      });

具体情况视自己后台数据返回的数据结构而定

3、这里可能大家还会遇到一个问题，就是给定默认值。
需要注意的是，我们给的默认值也一定要符合示例的数组解构。

{['zhejiang', 'hangzhou', 'xihu']}

 参考

  // todo 班级默认值处理
    const defaultId = classId;
    const defaultName = [];
    const Name = query.gradeName === '' ? abnormalClass : query.gradeName;
    defaultName.push(Name, defaultId)