Node.js 我有一个来自api的数据，如何在react中以树形显示它

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

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

---

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

有很多方法可以完成此任务。您可以自己创建一个组件来呈现

树

结构，也可以使用诸如

材质UI

之类的UI框架来完成任务。我认为最好不要在这里重新发明轮子，使用UI框架。例如，

物料界面

有一个

树

组件，用于

反应

。您可以实现类似这样的结构

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”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/lab/TreeView”导入TreeView；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/lab/TreeItem”导入TreeItem；
常数数据={
id:'根'，
名称：'父'，
儿童：[
{
id:'1'，
姓名：'Child-1'，
},
{
id:'3'，
姓名：'Child-3'，
儿童：[
{
id:'4'，
姓名：'Child-4'，
},
],
},
],
};
const useStyles=makeStyles({
根目录：{
身高：110，
flexGrow:1，
最大宽度：400，
},
});
导出默认函数RecursiveTreeView（）{
const classes=useStyles（）；
const renderTree=（节点）=>(
{Array.isArray（nodes.children）？nodes.children.map（（node）=>renderTree（node））：null}
);
返回(
{renderTree（数据）}
);
}

---

另一种选择是使用

npm

包，如。它很容易实现。它有很好的文档，您不必仅仅依靠UI框架来实现组件上的树视图。

有很多方法来完成此任务。您可以自己创建一个组件来呈现

树

结构，也可以使用诸如

材质UI

之类的UI框架来完成任务。我认为最好不要在这里重新发明轮子，使用UI框架。例如，

物料界面

有一个

树

组件，用于

反应

。您可以实现类似这样的结构

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”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/lab/TreeView”导入TreeView；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/lab/TreeItem”导入TreeItem；
常数数据={
id:'根'，
名称：'父'，
儿童：[
{
id:'1'，
姓名：'Child-1'，
},
{
id:'3'，
姓名：'Child-3'，
儿童：[
{
id:'4'，
姓名：'Child-4'，
},
],
},
],
};
const useStyles=makeStyles({
根目录：{
身高：110，
flexGrow:1，
最大宽度：400，
},
});
导出默认函数RecursiveTreeView（）{
const classes=useStyles（）；
const renderTree=（节点）=>(
{Array.isArray（nodes.children）？nodes.children.map（（node）=>renderTree（node））：null}
);
返回(
{renderTree（数据）}
);
}

另一种选择是使用

npm

包，如。它很容易实现。它有很好的文档，您不必仅仅依靠UI框架来实现组件上的树视图