## Vue d'arborescence d'objets extensible > `index.html` et `script.js` ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code dans `script.js` et `style.css`. Le code suivant affiche une vue d'arborescence rétractable d'un objet JSON ou d'un tableau. En utilisant le hook `useState()` pour créer la variable d'état `isToggled`, vous pouvez déterminer l'état initial du contenu (rétréci/développé) en passant la propriété `toggled`. L'apparence du composant est déterminée en fonction de `isParentToggled`, `isToggled`, `name` et en vérifiant `Array.isArray()` sur `data`. Pour chaque enfant dans `data`, déterminez s'il s'agit d'un objet ou d'un tableau et rendez récursivement un sous-arbre ou un élément de texte avec le style approprié. Pour basculer l'état du composant, rendez un élément `` et liez son événement `onClick` pour modifier l'état `isToggled` du composant. Les styles CSS sont définis pour l'apparence du composant, y compris les propriétés `margin`, `position`, `border` et `display`. ```jsx const TreeView = ({ data, toggled = true, name = null, isLast = true, isChildElement = false, isParentToggled = true }) => { const [isToggled, setIsToggled] = React.useState(toggled); const isDataArray = Array.isArray(data); return (

setIsToggled(!isToggled)} /> {name ? {name}: : } {isDataArray ? "[" : "{"} {!isToggled && "..."} {Object.keys(data).map((v, i, a) => typeof data[v] === "object" ? ( ) : (

{isDataArray ? "" : {v}: } {data[v]} {i === a.length - 1 ? "" : ","}

) )} {isDataArray ? "]" : "}"} {!isLast ? "," : ""}

); }; ``` ```css .tree-element { margin: 0 0 0 4px; position: relative; } .tree-element.is-child { margin-left: 16px; } div.tree-element::before { content: ""; position: absolute; top: 24px; left: 1px; height: calc(100% - 48px); border-left: 1px solid gray; } p.tree-element { margin-left: 16px; } .toggler { position: absolute; top: 10px; left: 0px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid gray; cursor: pointer; } .toggler.closed { transform: rotate(90deg); } .collapsed { display: none; } ``` ```jsx const data = { lorem: { ipsum: "dolor sit", amet: { consectetur: "adipiscing", elit: [ "duis", "vitae", { semper: "orci" }, { est: "sed ornare" }, "etiam", ["laoreet", "tincidunt"], ["vestibulum", "ante"] ] }, ipsum: "primis" } }; ReactDOM.createRoot(document.getElementById("root")).render( ); ``` Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet **Web 8080** pour prévisualiser la page web.