ReactJS 和 Material UI TreeView：我可以使用 JSON/对象数组来填充 TreeView 吗？

Question

我有一个包含需要填充<TreeView>组件的值的对象数组：

const treeItems = [
    {
        id: uuidv4(),
        name: 'English',
        children: [
            {
                id: uuidv4(),
                name: 'Spring',
                children: []
            }
        ]
    },
    {
        id: uuidv4(),
        name: 'Italian',
        children: [
            {
                id: uuidv4(),
                name: 'Level A',
                children: []
            }
        ]
    }
]

我想用它作为道具来自动填充TreeViewwith TreeItems。

目前我有一个函数可以在你传递数组时呈现孩子，但是检查文档（https://material-ui.com/api/tree-view/）我注意到有一个孩子的道具。

子节点组件的内容。

是否可以使用 JSON/对象数组来填充 TreeView？

Answer 1

该TreeView组件没有为此内置任何内容，但创建可重用代码来为给定数据结构提供此功能是相当简单的。

这是一种方法：

import React from "react";
import ReactDOM from "react-dom";

import TreeView from "@material-ui/lab/TreeView";
import TreeItem from "@material-ui/lab/TreeItem";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import { sampleFromStackOverflowQuestion, seasons } from "./sampleData";

const getTreeItemsFromData = treeItems => {
  return treeItems.map(treeItemData => {
    let children = undefined;
    if (treeItemData.children && treeItemData.children.length > 0) {
      children = getTreeItemsFromData(treeItemData.children);
    }
    return (
      <TreeItem
        key={treeItemData.id}
        nodeId={treeItemData.id}
        label={treeItemData.name}
        children={children}
      />
    );
  });
};
const DataTreeView = ({ treeItems }) => {
  return (
    <TreeView
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      {getTreeItemsFromData(treeItems)}
    </TreeView>
  );
};

function App() {
  return (
    <div className="App">
      <DataTreeView treeItems={sampleFromStackOverflowQuestion} />
      <br />
      <DataTreeView treeItems={seasons} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

DataTreeView并且getTreeItemsFromData可以移动到一个单独的文件中，然后导入以便在多个组件中重用它们。

这是一个打字稿版本：

import * as React from "react";

import TreeView from "@material-ui/lab/TreeView";
import TreeItem from "@material-ui/lab/TreeItem";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import {
  sampleFromStackOverflowQuestion,
  seasons,
  TreeItemData
} from "./sampleData";

const getTreeItemsFromData = (treeItems: TreeItemData[]) => {
  return treeItems.map(treeItemData => {
    let children = undefined;
    if (treeItemData.children && treeItemData.children.length > 0) {
      children = getTreeItemsFromData(treeItemData.children);
    }
    return (
      <TreeItem
        key={treeItemData.id}
        nodeId={treeItemData.id}
        label={treeItemData.name}
        children={children}
      />
    );
  });
};
interface DataTreeViewProps {
  treeItems: TreeItemData[];
}
function DataTreeView({ treeItems }: DataTreeViewProps) {
  return (
    <TreeView
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      {getTreeItemsFromData(treeItems)}
    </TreeView>
  );
}

export default function App() {
  return (
    <div className="App">
      <DataTreeView treeItems={sampleFromStackOverflowQuestion} />
      <br />
      <DataTreeView treeItems={seasons} />
    </div>
  );
}