Я новичок в реакции, и я создаю компонент TreeView в реакции, где я получаю данные по мере расширения узлов. Я использую TreeView из пользовательского интерфейса материалов: https://material-ui.com/api/tree-view/

Я создал компонент ниже, который выбирает данные при расширении узла. MyTreeItem — это пользовательская версия, расширяющая оригинал вызовом fetch. Но я запутался в том, как отобразить дочерние узлы. Как я могу это сделать?

 import ReactDOM from "react-dom"; import React from "react"; 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 { useState, useCallback } = React; export default function MyTreeItem({ id, name }) { const [childNodes, setChildNodes] = useState(null); const [expanded, setExpanded] = React.useState([]); function fakeAjax(url) { return fetch(url).then(res ={amp}gt; { if (!res.ok) { throw new Error("HTTP error "   res.status); } return res.json(); }); } function fetchChildNodes(id) { // Should in reality be "URL/id", but fake JSON for now return fakeAjax(`https://api.myjson.com/bins/1aqhsc`); } const handleChange = (event, nodes) ={amp}gt; { const expandingNodes = nodes.filter(x ={amp}gt; !expanded.includes(x)); setExpanded(nodes); if (expandingNodes[0]) { const childId = expandingNodes[0]; fetchChildNodes(childId).then(result ={amp}gt; setChildNodes(result.children.map(node ={amp}gt; {amp}lt;MyTreeItem {...node} /{amp}gt;)) ); } }; return ( {amp}lt;TreeView defaultCollapseIcon={{amp}lt;ExpandMoreIcon /{amp}gt;} defaultExpandIcon={{amp}lt;ChevronRightIcon /{amp}gt;} expanded={expanded} onNodeToggle={handleChange} {amp}gt; {/*The node below should act as the root node for now */} {amp}lt;TreeItem nodeId="1" label="Applications"{amp}gt; {/*The childnodes should be here*/} {amp}lt;/TreeItem{amp}gt; {amp}lt;/TreeView{amp}gt; ); } const rootElement = document.getElementById("root"); ReactDOM.render({amp}lt;MyTreeItem /{amp}gt;, rootElement); 

В вашем примере, кажется, вы пытаетесь построить дерево, где каждый узел, у которого есть дочерние элементы, также будет деревом.

В этом случае рендер будет выглядеть так:

 {/*The node below should act as the root node for now */} {amp}lt;TreeItem nodeId={props.id} label={props.name}{amp}gt; {childNodes || [{amp}lt;div key="stub" /{amp}gt;]} // stub div is used so user could see expand icon {amp}lt;/TreeItem{amp}gt; // you also need to pass props for root items ReactDOM.render({amp}lt;MyTreeItem id="1" name="Applications" /{amp}gt;, rootElement); 

Вы можете проверить рабочий код здесь: https://codesandbox.io/s/material-demo-k5ol6

Существует несколько способов визуализации дерева. Один из них — смоделировать древовидную структуру и отобразить ее таким образом, чтобы каждый узел, имеющий дочерние элементы, больше не был целым другим деревом с локальным состоянием, как в вашей реализации. Преимущество этого подхода заключается в том, что вы можете предоставить полное дерево с помощью реквизита, а не только извлекать его при действии «развернуть».

Вот пример такого подхода: https://codesandbox.io/s/material-demo-h6zfe

Также вы можете отобразить дерево в виде списка, где каждый вложенный уровень имеет смещение, указанное с помощью стилей. Это имеет преимущество, когда вам нужно иметь нумерацию страниц на каждом уровне отдельно (в случае, если на одном уровне много элементов). Реализация не так проста, как в приведенных выше случаях, поэтому я не буду приводить пример.