我有一个来自 api 的数据我如何在反应中以树的形式显示它

Question

This is the following data that is coming from api I have to dispaly this data in the tree form

 {
    "Customers": {
        "M": {
            "age": 20,
            "email": "m@kuchto.com",
            "AA": null,
            "DD": "555"
        },
        "Hh": {
            "course": {
                "c++": {
                    "duration": 3
                }
            }
        }}

I am not sure if I need to use map function inside my render method to iterate and display the data and how will it work along.Can someone let me know if I am doing it right or is there any better way of doing it. thanks in advance.

Answer 1

There are many ways to approach this task. You can create a component yourself to render the tree structure or you can use UI frameworks like Material UI to do the task for you. I think it's better not to re-invent the wheel here and use the UI framework. For example, Material UI has a Tree component for React . You can sort of implement the structure like this.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TreeView from '@material-ui/lab/TreeView';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import TreeItem from '@material-ui/lab/TreeItem';

const data = {
  id: 'root',
  name: 'Parent',
  children: [
    {
      id: '1',
      name: 'Child - 1',
    },
    {
      id: '3',
      name: 'Child - 3',
      children: [
        {
          id: '4',
          name: 'Child - 4',
        },
      ],
    },
  ],
};

const useStyles = makeStyles({
  root: {
    height: 110,
    flexGrow: 1,
    maxWidth: 400,
  },
});

export default function RecursiveTreeView() {
  const classes = useStyles();

  const renderTree = (nodes) => (
    <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
      {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null}
    </TreeItem>
  );

  return (
    <TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpanded={['root']}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      {renderTree(data)}
    </TreeView>
  );
}

Another option is to use npm packages like react-simple-tree-menu . It's easy to implement. It has good documentation and you don't have to rely on a UI framework just to implement a tree view on a component.