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 <span>
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
.
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 (
<div
className={`tree-element ${isParentToggled && "collapsed"} ${
isChildElement && "is-child"
}`}
>
<span
className={isToggled ? "toggler" : "toggler closed"}
onClick={() => setIsToggled(!isToggled)}
/>
{name ? <strong> {name}: </strong> : <span> </span>}
{isDataArray ? "[" : "{"}
{!isToggled && "..."}
{Object.keys(data).map((v, i, a) =>
typeof data[v] === "object" ? (
<TreeView
key={`${name}-${v}-${i}`}
data={data[v]}
isLast={i === a.length - 1}
name={isDataArray ? null : v}
isChildElement
isParentToggled={isParentToggled && isToggled}
/>
) : (
<p
key={`${name}-${v}-${i}`}
className={isToggled ? "tree-element" : "tree-element collapsed"}
>
{isDataArray ? "" : <strong>{v}: </strong>}
{data[v]}
{i === a.length - 1 ? "" : ","}
</p>
)
)}
{isDataArray ? "]" : "}"}
{!isLast ? "," : ""}
</div>
);
};
.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;
}
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(
<TreeView data={data} name="data" />
);
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.