Im vorherigen Kapitel haben wir die Grundlagen von JSX behandelt. Nun gehen wir einen Schritt weiter und lernen, wie komplexere JSX-Elemente erstellt werden.

Die Regel des einzelnen Elternelements

Eine wichtige Regel beim Arbeiten mit verschachteltem JSX ist, dass immer ein einzelnes Elternelement zurückgegeben werden muss. Dieses Elternelement umschließt alle weiteren verschachtelten Elemente. Diese Regel stellt sicher, dass React die Struktur deines JSX korrekt rendern und verwalten kann. Hier ein praktisches Beispiel zur Veranschaulichung dieser Regel:

Gültiges JSX:

<div>
  <h1>Welcome to My Website</h1>
  <p>Explore amazing content:</p>
  <ul>
    <li>Article 1</li>
    <li>Article 2</li>
    <li>Article 3</li>
  </ul>
</div>

Ungültiges JSX (wird nicht transpiliert):

<h1>Welcome to My Website</h1>
<p>Explore amazing content:</p>
<ul>
  <li>Article 1</li>
  <li>Article 2</li>
  <li>Article 3</li>
</ul>

Hinweis

Beim Rendern mehrerer Elemente wie in diesem Beispiel können alle Elemente zur besseren Übersicht in Klammern () gesetzt werden, dies ist jedoch nicht zwingend erforderlich. Beachten Sie außerdem, dass dieses Konzept beim Zurückgeben von JSX-Elementen in React-Komponenten gilt.

Beispiel

const JSX = (
  <div>
    <h1>Welcome to My Website</h1>
    <p>Explore amazing content:</p>
    <ul>
      <li>Article 1</li>
      <li>Article 2</li>
      <li>Article 3</li>
    </ul>
  </div>
);