React中实现n级树形目录

需求描述：实现n级属性目录展开，该实现使用react，antd-mobile

实现效果

使用方法

import TreesMenu from "./treeMenu.jsx";

<TreesMenu
       datas={treesData}
       onselected={item => {
           console.log("选择了树形目录的数据：", item);
       }}
></TreesMenu>

实现数据

export let treesData = [{"Childs":[{"Childs":[],"DeptName":"班子成员","ShortName":"班子成员","DeptCode":"81","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408498041056},{"Childs":[],"DeptName":"调研员","ShortName":"调研员","DeptCode":"82","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408531598048},{"Childs":[],"DeptName":"党政办公室","ShortName":"党政办公室","DeptCode":"83","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408548375776},{"Childs":[],"DeptName":"党政办公室（财务）","ShortName":"党政办公室（财务）","DeptCode":"84","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408581929184},{"Childs":[],"DeptName":"党建办公室","ShortName":"党建办公室","DeptCode":"85","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408598709728},{"Childs":[],"DeptName":"平安办公室","ShortName":"平安办公室","DeptCode":"86","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408615482336},{"Childs":[],"DeptName":"信访办公室","ShortName":"信访办公室","DeptCode":"87","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408632263392},{"Childs":[],"DeptName":"管理办公室","ShortName":"管理办公室","DeptCode":"88","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408649039584},{"Childs":[],"DeptName":"自治办公室","ShortName":"自治办公室","DeptCode":"89","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408665815776},{"Childs":[],"DeptName":"综合事务办公室","ShortName":"综合事务办公室","DeptCode":"90","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408665819872},{"Childs":[],"DeptName":"监察办公室","ShortName":"监察办公室","DeptCode":"91","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408682596576},{"Childs":[],"DeptName":"武装部","ShortName":"武装部","DeptCode":"92","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408699368672},{"Childs":[],"DeptName":"司法所","ShortName":"司法所","DeptCode":"93","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408699371232},{"Childs":[],"DeptName":"城运中心","ShortName":"城运中心","DeptCode":"94","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408716144864},{"Childs":[],"DeptName":"工会","ShortName":"工会","DeptCode":"95","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408749699296},{"Childs":[],"DeptName":"团委","ShortName":"团委","DeptCode":"96","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408749700320},{"Childs":[],"DeptName":"妇联","ShortName":"妇联","DeptCode":"97","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408749703648},{"Childs":[],"DeptName":"房管办","ShortName":"房管办","DeptCode":"98","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408749704672},{"Childs":[],"DeptName":"安监所","ShortName":"安监所","DeptCode":"99","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408766480352},{"Childs":[],"DeptName":"党建服务中心","ShortName":"党建服务中心","DeptCode":"100","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408783258080},{"Childs":[],"DeptName":"社区事务受理中心","ShortName":"社区事务受理中心","DeptCode":"101","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408816808672},{"Childs":[],"DeptName":"社区文化中心","ShortName":"社区文化中心","DeptCode":"102","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408917476576},{"Childs":[],"DeptName":"社区学校","ShortName":"社区学校","DeptCode":"103","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408951031264},{"Childs":[],"DeptName":"绿化市容","ShortName":"绿化市容","DeptCode":"104","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408951033824},{"Childs":[],"DeptName":"周家渡城管中队","ShortName":"周家渡城管中队","DeptCode":"105","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408967806688},{"Childs":[],"DeptName":"商会","ShortName":"商会","DeptCode":"106","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408967810016},{"Childs":[],"DeptName":"开发人员","ShortName":"开发人员","DeptCode":"107","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073408967811040},{"Childs":[{"Childs":[],"DeptName":"上南八村","ShortName":"上南八村","DeptCode":"109","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409034918368},{"Childs":[],"DeptName":"上南四村","ShortName":"上南四村","DeptCode":"110","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409051695840},{"Childs":[],"DeptName":"上南五村","ShortName":"上南五村","DeptCode":"111","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409068471776},{"Childs":[],"DeptName":"上南六村","ShortName":"上南六村","DeptCode":"112","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409102022368},{"Childs":[],"DeptName":"上南七村","ShortName":"上南七村","DeptCode":"113","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409118800352},{"Childs":[],"DeptName":"上南九村","ShortName":"上南九村","DeptCode":"114","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409135576544},{"Childs":[],"DeptName":"齐河一","ShortName":"齐河一","DeptCode":"115","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409152353760},{"Childs":[],"DeptName":"齐河二","ShortName":"齐河二","DeptCode":"116","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409152360928},{"Childs":[],"DeptName":"上南十村1","ShortName":"上南十村1","DeptCode":"117","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409169135840},{"Childs":[],"DeptName":"上南十二村","ShortName":"上南十二村","DeptCode":"118","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409185911520},{"Childs":[],"DeptName":"上南十村2","ShortName":"上南十村2","DeptCode":"119","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409202686432},{"Childs":[],"DeptName":"上南十一村","ShortName":"上南十一村","DeptCode":"120","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409219461344},{"Childs":[],"DeptName":"都市庭院","ShortName":"都市庭院","DeptCode":"121","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409219466976},{"Childs":[],"DeptName":"川新","ShortName":"川新","DeptCode":"122","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409236243680},{"Childs":[],"DeptName":"雪野二村","ShortName":"雪野二村","DeptCode":"123","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409253021152},{"Childs":[],"DeptName":"上南花苑","ShortName":"上南花苑","DeptCode":"124","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409269798368},{"Childs":[],"DeptName":"昌里花园","ShortName":"昌里花园","DeptCode":"125","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409286570976},{"Childs":[],"DeptName":"恒大","ShortName":"恒大","DeptCode":"126","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409303348192},{"Childs":[],"DeptName":"上南三村","ShortName":"上南三村","DeptCode":"127","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409303353824},{"Childs":[],"DeptName":"上南一村","ShortName":"上南一村","DeptCode":"128","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409320130784},{"Childs":[],"DeptName":"上南二村","ShortName":"上南二村","DeptCode":"129","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409336908000},{"Childs":[],"DeptName":"昌里五","ShortName":"昌里五","DeptCode":"130","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409353685728},{"Childs":[],"DeptName":"云台一","ShortName":"云台一","DeptCode":"131","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409370462176},{"Childs":[],"DeptName":"云台二","ShortName":"云台二","DeptCode":"132","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409387237344},{"Childs":[],"DeptName":"云莲一","ShortName":"云莲一","DeptCode":"133","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409404012512},{"Childs":[],"DeptName":"昌里七","ShortName":"昌里七","DeptCode":"134","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409420789472},{"Childs":[],"DeptName":"动迁联合","ShortName":"动迁联合","DeptCode":"135","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409437567200},{"Childs":[],"DeptName":"齐河四","ShortName":"齐河四","DeptCode":"146","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409487902688},{"Childs":[],"DeptName":"齐河三","ShortName":"齐河三","DeptCode":"147","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409504677856},{"Childs":[],"DeptName":"昌里四","ShortName":"昌里四","DeptCode":"148","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409521452768},{"Childs":[],"DeptName":"齐河八","ShortName":"齐河八","DeptCode":"149","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409538229984},{"Childs":[],"DeptName":"齐河五","ShortName":"齐河五","DeptCode":"150","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409555007968},{"Childs":[],"DeptName":"齐河七","ShortName":"齐河七","DeptCode":"151","ParentID":2073409034918112,"Layer":2,"Path":",0,1,2073409034918112,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409555013600}],"DeptName":"居委会","ShortName":"居委会","DeptCode":"108","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409034918112},{"Childs":[{"Childs":[],"DeptName":"办公室","ShortName":"办公室","DeptCode":"137","ParentID":2073409437571296,"Layer":2,"Path":",0,1,2073409437571296,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409437571552},{"Childs":[],"DeptName":"事务所","ShortName":"事务所","DeptCode":"138","ParentID":2073409437571296,"Layer":2,"Path":",0,1,2073409437571296,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409454343904}],"DeptName":"队伍建设办公室","ShortName":"队伍建设办公室","DeptCode":"136","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409437571296},{"Childs":[{"Childs":[],"DeptName":"办公室","ShortName":"办公室","DeptCode":"140","ParentID":2073409454347232,"Layer":2,"Path":",0,1,2073409454347232,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409454347488},{"Childs":[],"DeptName":"慈善超市","ShortName":"慈善超市","DeptCode":"141","ParentID":2073409454347232,"Layer":2,"Path":",0,1,2073409454347232,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409471121632},{"Childs":[],"DeptName":"残联","ShortName":"残联","DeptCode":"142","ParentID":2073409454347232,"Layer":2,"Path":",0,1,2073409454347232,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409471122656},{"Childs":[],"DeptName":"计生办","ShortName":"计生办","DeptCode":"143","ParentID":2073409454347232,"Layer":2,"Path":",0,1,2073409454347232,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409471124448},{"Childs":[],"DeptName":"爱卫办","ShortName":"爱卫办","DeptCode":"144","ParentID":2073409454347232,"Layer":2,"Path":",0,1,2073409454347232,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409487897568},{"Childs":[],"DeptName":"老龄办","ShortName":"老龄办","DeptCode":"145","ParentID":2073409454347232,"Layer":2,"Path":",0,1,2073409454347232,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409487900896},{"Childs":[],"DeptName":"居家养老服务中心","ShortName":"居家养老服务中心","DeptCode":"152","ParentID":2073409454347232,"Layer":2,"Path":",0,1,2073409454347232,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2080463921349388},{"Childs":[],"DeptName":"综合为老服务中心","ShortName":"综合为老服务中心","DeptCode":"153","ParentID":2073409454347232,"Layer":2,"Path":",0,1,2073409454347232,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2080464005240076}],"DeptName":"服务办公室","ShortName":"服务办公室","DeptCode":"139","ParentID":1,"Layer":1,"Path":",0,1,","Sequence":0,"IsEnabled":1,"IsUnit":0,"ID":2073409454347232}],"DeptName":"周家渡街道办事处","ShortName":"周家渡街道办事处","DeptCode":"SHRGBTRJJSYXGS ","ParentID":0,"Layer":0,"Path":",0,","Sequence":11,"LeaderID":0,"ManagerID":0,"IsEnabled":1,"IsUnit":1,"ID":1,"SystemID":1}];

实现代码

import React from "react";
import { Accordion, List } from "antd-mobile";

class TreesMenu extends React.Component {
  render() {
    let datas = this.props.datas;
    return (
      <div>
        {datas instanceof Array ? (
          <div>
            {datas.map((d, index) => {
              return <TreeNode datas={d} key={index} onselected={(item) => this.props.onselected(item)}></TreeNode>;
            })}
          </div>
        ) : (
          <div>请传入正确格式</div>
        )}
      </div>
    );
  }
}

export default TreesMenu;

class TreeNode extends React.Component {
  renderItems(datas) {
    return (
      <List className="my-list">
        <List.Item>content 1</List.Item>
        <List.Item>content 2</List.Item>
        <List.Item>content 3</List.Item>
      </List>
    );
  }
  render() {
    let data = this.props.datas;
    return data && (!data.Childs || data.Childs.length === 0) ? (
      <div>
        <List className="my-list" onClick={() => {
            this.props.onselected(data)
        }}>
          <List.Item>{data.DeptName}</List.Item>
        </List>
      </div>
    ) : (
      <div>
        <Accordion
          onChange={this.onChange}
        >
          <Accordion.Panel header={data.DeptName} className="tree-accordion-panel">
            {data && data.Childs && data.Childs.map((item, index) => {
              return <TreeNode datas={item} onselected={(item) => this.props.onselected(item)} key={index}></TreeNode>;
            })}
          </Accordion.Panel>
        </Accordion>
      </div>
    );
  }
}