3.基于antd_mobile，将树形结构拆分为列表

需求:后端返回一个类似钉钉组织的树形结构，需要根据树形结构优先展示父元素层级列表，点击后进入其子元素的层级列表，依次点击进入其子元素，当子元素数组为空时，不展示能点入下一层级的按钮，当点击返回按钮时，需要返回到当前子元素上一层级的父元素同级列表。

分析:当拿到树形结构后，保存当前数据源，并且保留一份用于操作数据源，核心是将每次点击的index保存在一个数组中。当只考虑往下一层级点击，这里只需要拿到item，对应着的index的子元素即可。当只考虑点击返回时，需要将保存的index数组的最后一个index删除，再变量index数组，找到数据源下的对应的子元素即可，需要考虑到，当返回的index的长度为1时的特殊情况，此时将操作的数组源变成初始数据源即可。

总结:将交互变为数据很关键，每次的交互其实操作的是保存的index数组，根据index对页面列表的数据源进行替换，达到操作数据实现页面交互。

代码实现:

  const [saveIndex, setSaveIndex] = useState([]); // 保存点击的每个index，根据数据源找到对应的动态列表数据源
  const [reportData, setReportData] = useState([]); // 列表动态数据
  const [allData, setAllData] = useState([]); // 保留全部数据，不做改变
  
    // 点击下一级更改数据源
  const netxClick = (item, index) => {
    // console.log(item, index);
    if (item.childrens) {
      let transIndex = JSON.parse(JSON.stringify(saveIndex));
      transIndex.push(index);
      setReportData(item.childrens);
      setSaveIndex(transIndex);
    }
  };
    // 点击返回更新数据源
  const preClick = () => {
    let transIndex = JSON.parse(JSON.stringify(saveIndex));
    if (saveIndex.length > 1) {
      let transAllData = JSON.parse(JSON.stringify(allData));
      //删除最后一个元素
      transIndex.pop();
      // 根据保存的每个层级index，找到对应的数据源
      transIndex.forEach((item) => {
        transAllData = transAllData[item].childrens;
      });
      // console.log(transAllData, 'transAllData');
      setReportData(transIndex);
    } else if (saveIndex.length == 1) {
      setReportData(allData);
      transIndex.pop();
      setSaveIndex(transIndex);
    }
  };