React implements an N-level tree directory

Requirement description: Implement n-level property directory expansion, which uses React, ANTD-mobile

Implementation effect

Method of use

import TreesMenu from "./treeMenu.jsx";

<TreesMenu
       datas={treesData}
       onselected={item => {
           console.log("Select tree directory data:", item);
       }}
></TreesMenu>
Copy the code

Implement the data

export let treesData = [{"Childs": [{"Childs": []."DeptName":"Team member."."ShortName":"Team member."."DeptCode":"81"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408498041056}, {"Childs": []."DeptName":"Researcher"."ShortName":"Researcher"."DeptCode":"82"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408531598048}, {"Childs": []."DeptName":"Party and Government Office"."ShortName":"Party and Government Office"."DeptCode":"83"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408548375776}, {"Childs": []."DeptName":"Party and Government Office (Finance)"."ShortName":"Party and Government Office (Finance)"."DeptCode":"84"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408581929184}, {"Childs": []."DeptName":"Party building Office"."ShortName":"Party building Office"."DeptCode":"85"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408598709728}, {"Childs": []."DeptName":"Safe Office"."ShortName":"Safe Office"."DeptCode":"86"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408615482336}, {"Childs": []."DeptName":"Petition Office"."ShortName":"Petition Office"."DeptCode":"87"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408632263392}, {"Childs": []."DeptName":"Management office"."ShortName":"Management office"."DeptCode":"88"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408649039584}, {"Childs": []."DeptName":"Autonomous Office"."ShortName":"Autonomous Office"."DeptCode":"89"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408665815776}, {"Childs": []."DeptName":General Services Office."ShortName":General Services Office."DeptCode":"90"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408665819872}, {"Childs": []."DeptName":Office of Supervision."ShortName":Office of Supervision."DeptCode":"91"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408682596576}, {"Childs": []."DeptName":Armed Forces department."ShortName":Armed Forces department."DeptCode":"92"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408699368672}, {"Childs": []."DeptName":"Department of Justice"."ShortName":"Department of Justice"."DeptCode":"93"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408699371232}, {"Childs": []."DeptName":"Urban Transport Center"."ShortName":"Urban Transport Center"."DeptCode":"94"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408716144864}, {"Childs": []."DeptName":"The union"."ShortName":"The union"."DeptCode":"95"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408749699296}, {"Childs": []."DeptName":"Youth corps committee"."ShortName":"Youth corps committee"."DeptCode":"96"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408749700320}, {"Childs": []."DeptName":"Women's"."ShortName":"Women's"."DeptCode":"97"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408749703648}, {"Childs": []."DeptName":"Housing Control Office"."ShortName":"Housing Control Office"."DeptCode":"98"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408749704672}, {"Childs": []."DeptName":"Safe house"."ShortName":"Safe house"."DeptCode":"99"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408766480352}, {"Childs": []."DeptName":"Party Construction Service Center"."ShortName":"Party Construction Service Center"."DeptCode":"100"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408783258080}, {"Childs": []."DeptName":"Community Affairs Reception Centre"."ShortName":"Community Affairs Reception Centre"."DeptCode":"101"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408816808672}, {"Childs": []."DeptName":"Community Cultural Centre"."ShortName":"Community Cultural Centre"."DeptCode":"102"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408917476576}, {"Childs": []."DeptName":"Community school"."ShortName":"Community school"."DeptCode":"103"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408951031264}, {"Childs": []."DeptName":"Greening the City"."ShortName":"Greening the City"."DeptCode":"104"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408951033824}, {"Childs": []."DeptName":"Zhou Jia Du Chengguan Squadron"."ShortName":"Zhou Jia Du Chengguan Squadron"."DeptCode":"105"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408967806688}, {"Childs": []."DeptName":"The chamber of commerce"."ShortName":"The chamber of commerce"."DeptCode":"106"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408967810016}, {"Childs": []."DeptName":"Developer"."ShortName":"Developer"."DeptCode":"107"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073408967811040}, {"Childs": [{"Childs": []."DeptName":"Eight Villages in the Upper South"."ShortName":"Eight Villages in the Upper South"."DeptCode":"109"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409034918368}, {"Childs": []."DeptName":"Four Villages in the Upper South"."ShortName":"Four Villages in the Upper South"."DeptCode":"110"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409051695840}, {"Childs": []."DeptName":"Five Villages in the Upper South"."ShortName":"Five Villages in the Upper South"."DeptCode":"111"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409068471776}, {"Childs": []."DeptName":"Six Villages in the Upper South"."ShortName":"Six Villages in the Upper South"."DeptCode":"112"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409102022368}, {"Childs": []."DeptName":"Upper South Seventh Village"."ShortName":"Upper South Seventh Village"."DeptCode":"113"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409118800352}, {"Childs": []."DeptName":"Upper South Kowloon Village"."ShortName":"Upper South Kowloon Village"."DeptCode":"114"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409135576544}, {"Childs": []."DeptName":"Qi He Yi"."ShortName":"Qi He Yi"."DeptCode":"115"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409152353760}, {"Childs": []."DeptName":"Qihe Ii"."ShortName":"Qihe Ii"."DeptCode":"116"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409152360928}, {"Childs": []."DeptName":"Upper South 10 Village 1"."ShortName":"Upper South 10 Village 1"."DeptCode":"117"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409169135840}, {"Childs": []."DeptName":"The 12th Village in upper South"."ShortName":"The 12th Village in upper South"."DeptCode":"118"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409185911520}, {"Childs": []."DeptName":"Upper South 10 Village 2"."ShortName":"Upper South 10 Village 2"."DeptCode":"119"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409202686432}, {"Childs": []."DeptName":"Shangnan 11th Village"."ShortName":"Shangnan 11th Village"."DeptCode":"120"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409219461344}, {"Childs": []."DeptName":"Urban Courtyard"."ShortName":"Urban Courtyard"."DeptCode":"121"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409219466976}, {"Childs": []."DeptName":"Sichuan new"."ShortName":"Sichuan new"."DeptCode":"122"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409236243680}, {"Childs": []."DeptName":"Snow Field two Village"."ShortName":"Snow Field two Village"."DeptCode":"123"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409253021152}, {"Childs": []."DeptName":"Upper South Garden"."ShortName":"Upper South Garden"."DeptCode":"124"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409269798368}, {"Childs": []."DeptName":"Changli Garden"."ShortName":"Changli Garden"."DeptCode":"125"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409286570976}, {"Childs": []."DeptName":"Evergrande"."ShortName":"Evergrande"."DeptCode":"126"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409303348192}, {"Childs": []."DeptName":"Three Villages in the Upper South"."ShortName":"Three Villages in the Upper South"."DeptCode":"127"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409303353824}, {"Childs": []."DeptName":"A village in the Upper South"."ShortName":"A village in the Upper South"."DeptCode":"128"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409320130784}, {"Childs": []."DeptName":"Upper South Second Village"."ShortName":"Upper South Second Village"."DeptCode":"129"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409336908000}, {"Childs": []."DeptName":Changli Wu."ShortName":Changli Wu."DeptCode":"130"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409353685728}, {"Childs": []."DeptName":"Yuntai I"."ShortName":"Yuntai I"."DeptCode":"131"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409370462176}, {"Childs": []."DeptName":"Pylon 2"."ShortName":"Pylon 2"."DeptCode":"132"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409387237344}, {"Childs": []."DeptName":"Cloud Lotus one"."ShortName":"Cloud Lotus one"."DeptCode":"133"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409404012512}, {"Childs": []."DeptName":"Changli seven"."ShortName":"Changli seven"."DeptCode":"134"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409420789472}, {"Childs": []."DeptName":"Relocation union"."ShortName":"Relocation union"."DeptCode":"135"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409437567200}, {"Childs": []."DeptName":"Qi He Si"."ShortName":"Qi He Si"."DeptCode":"146"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409487902688}, {"Childs": []."DeptName":"Qi He SAN"."ShortName":"Qi He SAN"."DeptCode":"147"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409504677856}, {"Childs": []."DeptName":Chang-ri Four."ShortName":Chang-ri Four."DeptCode":"148"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409521452768}, {"Childs": []."DeptName":"Qihe Eight"."ShortName":"Qihe Eight"."DeptCode":"149"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409538229984}, {"Childs": []."DeptName":"Qihewu"."ShortName":"Qihewu"."DeptCode":"150"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409555007968}, {"Childs": []."DeptName":"Qihe Seven"."ShortName":"Qihe Seven"."DeptCode":"151"."ParentID": 2073409034918112,"Layer": 2."Path":"0,1,2073409034918112,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409555013600}]."DeptName":"Neighborhood Committee"."ShortName":"Neighborhood Committee"."DeptCode":"108"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409034918112}, {"Childs": [{"Childs": []."DeptName":"The office"."ShortName":"The office"."DeptCode":"137"."ParentID": 2073409437571296,"Layer": 2."Path":"0,1,2073409437571296,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409437571552}, {"Childs": []."DeptName":"Firm"."ShortName":"Firm"."DeptCode":"138"."ParentID": 2073409437571296,"Layer": 2."Path":"0,1,2073409437571296,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409454343904}]."DeptName":"Team Building Office"."ShortName":"Team Building Office"."DeptCode":"136"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409437571296}, {"Childs": [{"Childs": []."DeptName":"The office"."ShortName":"The office"."DeptCode":"140"."ParentID": 2073409454347232,"Layer": 2."Path":"0,1,2073409454347232,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409454347488}, {"Childs": []."DeptName":Charity Supermarket."ShortName":Charity Supermarket."DeptCode":"141"."ParentID": 2073409454347232,"Layer": 2."Path":"0,1,2073409454347232,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409471121632}, {"Childs": []."DeptName":"Disabled persons' federation"."ShortName":"Disabled persons' federation"."DeptCode":"142"."ParentID": 2073409454347232,"Layer": 2."Path":"0,1,2073409454347232,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409471122656}, {"Childs": []."DeptName":Family Planning Office."ShortName":Family Planning Office."DeptCode":"143"."ParentID": 2073409454347232,"Layer": 2."Path":"0,1,2073409454347232,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409471124448}, {"Childs": []."DeptName":"Patriotic Health Office"."ShortName":"Patriotic Health Office"."DeptCode":"144"."ParentID": 2073409454347232,"Layer": 2."Path":"0,1,2073409454347232,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409487897568}, {"Childs": []."DeptName":"Office for the Elderly"."ShortName":"Office for the Elderly"."DeptCode":"145"."ParentID": 2073409454347232,"Layer": 2."Path":"0,1,2073409454347232,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409487900896}, {"Childs": []."DeptName":Home Care Centre."ShortName":Home Care Centre."DeptCode":"152"."ParentID": 2073409454347232,"Layer": 2."Path":"0,1,2073409454347232,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2080463921349388}, {"Childs": []."DeptName":"Integrated Service Centre for the Elderly"."ShortName":"Integrated Service Centre for the Elderly"."DeptCode":"153"."ParentID": 2073409454347232,"Layer": 2."Path":"0,1,2073409454347232,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2080464005240076}]."DeptName":"Service Office"."ShortName":"Service Office"."DeptCode":"139"."ParentID": 1,"Layer": 1,"Path":",0,1,"."Sequence": 0."IsEnabled": 1,"IsUnit": 0."ID": 2073409454347232}]."DeptName":"Chow Ka to Street Office"."ShortName":"Chow Ka to Street Office"."DeptCode":"SHRGBTRJJSYXGS "."ParentID": 0."Layer": 0."Path":"0,"."Sequence": 11."LeaderID": 0."ManagerID": 0."IsEnabled": 1,"IsUnit": 1,"ID": 1,"SystemID": 1}];Copy the code

The implementation code

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> please pass the correct format </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;
    returndata && (! 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> ); }}Copy the code

React implements an N-level tree directory

Related Posts

Webpack packages common libraries

Explore valueOf and toString in JavaScript

Talk about the HTTPS