LabEx
LoginBeitreten

Dynamische React-Listenkomponente

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir untersuchen, wie man in React mithilfe der Komponente DataList eine dynamische Listenkomponente erstellt. Mit dieser Komponente können wir ein Array von primitiven Werten als nummerierte oder aufzählungsfreie Liste rendern. Am Ende des Labs werdet ihr ein besseres Verständnis dafür haben, wie man Array.prototype.map() verwendet und in React bedingte Elemente basierend auf Props rendert.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 95% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Datenliste

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Diese Funktion rendert eine Liste von Elementen aus einem Array von primitiven Werten. Sie kann verwendet werden, um eine nummerierte oder aufzählungsfreie Liste bedingt basierend auf dem Wert der isOrdered-Eigenschaft zu rendern. Um jedes Element aus dem data-Array zu rendern, verwendet sie Array.prototype.map(), um ein <li>-Element mit einem eindeutigen key für jedes Element zu erstellen.

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>;
};

Hier ist ein Beispiel dafür, wie Sie diese Komponente verwenden können:

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

In diesem Beispiel übergeben wir ein Array von Namen an die DataList-Komponente und rendern es 两次。Zum ersten Mal rendern wir eine aufzählungsfreie Liste, während wir zum zweiten Mal eine nummerierte Liste rendern.

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Data List Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.