Composant de liste dynamique React | Tutoriel de programmation

Introduction

Dans ce laboratoire, nous allons explorer comment créer un composant de liste dynamique dans React en utilisant le composant DataList. Avec ce composant, nous pouvons afficher un tableau de valeurs primitives sous forme d'une liste ordonnée ou non ordonnée. À la fin du laboratoire, vous aurez une meilleure compréhension de la manière d'utiliser Array.prototype.map() et de rendre conditionnellement des éléments en fonction des props dans React.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 95%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Data List

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 à script.js et style.css.

Cette fonction affiche une liste d'éléments à partir d'un tableau de valeurs primitives. Elle peut être utilisée pour afficher conditionnellement une liste ordonnée ou non ordonnée en fonction de la valeur de la prop isOrdered. Pour afficher chaque élément du tableau data, elle utilise Array.prototype.map() pour créer un élément <li> avec une clé unique pour chaque élément.

const DataList = ({ data, isOrdered = false }) => {
  const list = data.map((value, index) => (
    <li key={`${index}_${value}`}>{value}</li>
  ));

  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
};

Voici un exemple de manière dont vous pouvez utiliser ce composant :

const names = ["John", "Paul", "Mary"];
ReactDOM.createRoot(document.getElementById("root")).render(
  <>
    <DataList data={names} />
    <DataList data={names} isOrdered={true} />
  </>
);

Dans cet exemple, nous passons un tableau de noms au composant DataList et l'affichons deux fois. La première fois, nous affichons une liste non ordonnée, tandis que la seconde fois, nous affichons une liste ordonnée.

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.

Summary

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