Vue d'arborescence d'objets extensible : Maîtriser la visualisation de données en React

Introduction

Dans ce laboratoire, nous allons apprendre à créer une vue d'arborescence d'objets extensible en React. Ce composant est utile pour afficher des structures de données complexes sous une forme structurée et rétractable. Nous utiliserons le hook useState et la récursivité pour rendre une vue d'arborescence d'un objet JSON ou d'un tableau avec un contenu rétractable. À la fin de ce laboratoire, vous serez capable de créer et de personnaliser un composant de vue d'arborescence pour afficher vos données de manière claire et organisée.

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>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</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.

Sommaire

Félicitations! Vous avez terminé le laboratoire Vue d'arborescence d'objets extensible. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.