Tengo un objeto jerárquico. Se ve como esto:
{ id: 74, parentId: null, children: [ { id: 62, parentId: 74, children: [{ id: 56, parentId: 62 }, { id: 63, parentId: 62 }], }, { id: 86, parentId: 74, children: [ { id: 80, parentId: 86, children: [{ id: 81, parentId: 80 }, { id: 76, parentId: 80 }], }, { id: 87, parentId: 86 }, ], }, ], };Quiero mostrarlo en mi interfaz usando el módulo de vista de árbol que obtuve de https://mui.com/material-ui/react-tree-view/ La sintaxis para la vista de árbol es así:
return ( <TreeView aria-label="file system navigator" defaultCollapseIcon={<ExpandMoreIcon />} defaultExpandIcon={<ChevronRightIcon />} sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} > <TreeItem nodeId="1" label="Applications"> <TreeItem nodeId="2" label="Calendar" /> </TreeItem> <TreeItem nodeId="5" label="Documents"> <TreeItem nodeId="10" label="OSS" /> <TreeItem nodeId="6" label="MUI"> <TreeItem nodeId="8" label="index.js" /> </TreeItem> </TreeItem> </TreeView> ); }¿Cómo puedo recorrer mi objeto e ingresar los valores respectivos en los elementos del árbol principal y secundario dentro de esta sintaxis de árbol? Debe tener un aspecto como este:
<TreeItem nodeId="74" label="74"> <TreeItem nodeId="62" label="62"> <TreeItem nodeId="52" label="52"/> <TreeItem /> . . . <TreeItem />puedes hacer algo como esto
const renderTree = tree => { return <TreeItem key={tree.id} nodeId={tree.id} label={tree.id}> {tree.children && tree.children.map(renderTree)} </TreeItem> } return ( <TreeView aria-label="file system navigator" defaultCollapseIcon={<ExpandMoreIcon />} defaultExpandIcon={<ChevronRightIcon />} sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} > {renderTree(tree)} </TreeView> );