Komposition: children und das Aufteilen in Komponenten

Baue wiederverwendbare Container-Komponenten mit der children-Prop und teile deine Screens in klare Verantwortlichkeiten auf.

6 Min. · 3 Fragen

Manche Komponenten kennen ihren Inhalt nicht im Voraus: eine Karte, ein Modalfenster, ein Layout. React löst das mit der speziellen children-Prop: Alles, was du zwischen dem öffnenden und schließenden Tag einer Komponente platzierst, wird ihr übergeben, bereit, überall dort eingefügt zu werden, wo sie will. Der Container kümmert sich um den Rahmen, der Aufrufer liefert den Inhalt.

function Card({ children }) {
  return <section className="card">{children}</section>;
}

function App() {
  return (
    <Card>
      <h2>Invoice #1024</h2>
      <p>Amount: €49.90</p>
    </Card>
  );
}

Wenn ein einziger Slot nicht ausreicht, übergibst du JSX über benannte Props: einen Titel, einen Footer, eine Aktionsleiste. Eine Prop kann ein React-Element wie jeden anderen Wert entgegennehmen. Du bekommst mehrere „Slots“, jeder klar benannt.

function Modal({ title, footer, children }) {
  return (
    <div className="modal">
      <header>{title}</header>
      <div className="modal-body">{children}</div>
      <footer>{footer}</footer>
    </div>
  );
}

Komposition leitet auch das Aufteilen. Eine Komponente sollte eine identifizierbare Verantwortung haben: eine Nutzerzeile anzeigen, eine Liste anordnen. Sobald eine Komponente mehrere Rollen anhäuft, extrahiere Unterkomponenten: Jede wird kürzer, leichter zu testen und anderswo wiederverwendbar.

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <UserRow key={user.id} user={user} />
      ))}
    </ul>
  );
}

function UserRow({ user }) {
  return (
    <li>
      <strong>{user.name}</strong> - {user.email}
    </li>
  );
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was erhält die children-Prop einer Komponente?
   • Die Liste ihrer in derselben Datei deklarierten Kindkomponenten
   • Alles, was zwischen ihrem öffnenden und schließenden Tag platziert wird
   • Die von der Elternkomponente durchgereichten Props
2. Kannst du JSX in einer anderen Prop als children übergeben?
   • Ja, ein React-Element ist ein Wert wie jeder andere
   • Nein, nur die children-Prop nimmt JSX an
   • Ja, aber nur als Zeichenkette, die HTML enthält
3. Welches Signal weist am zuverlässigsten darauf hin, dass eine Komponente aufgeteilt werden sollte?
   • Sie überschreitet zwanzig Codezeilen
   • Sie verwendet mehr als ein useState
   • Sie vereint mehrere verschiedene Verantwortlichkeiten in ihrem Rendering