时间戳

首页 > 解决方案 > 我有一个来自 api 的数据我如何在反应中以树的形式显示它

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

问题描述

这是来自 api 的以下数据我必须以树形形式显示这些数据

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

我不确定我是否需要在我的渲染方法中使用 map 函数来迭代和显示数据以及它将如何工作。有人可以告诉我我做得对还是有更好的方法。提前致谢。

标签： node.jsreactjs

解决方案

有很多方法可以完成这项任务。您可以自己创建一个组件来呈现tree结构，也可以使用 UI 框架Material UI来为您完成任务。我认为最好不要在这里重新发明轮子并使用UI框架。例如，Material UI有一个Tree用于React. 您可以像这样实现结构。

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>
  );
}

另一种选择是使用react-simple-tree-menu 之npm类的包。这很容易实现。它有很好的文档，您不必仅仅依靠 UI 框架来在组件上实现树视图。

推荐阅读