Entwurfsmuster · Middle · Frage 11 von 75
Wie rendert man einen Kommentarbaum beliebiger Tiefe?
function Comment({ comment }) {
return (
<li>
{comment.text}
{comment.replies.length > 0 && (
<ul>{comment.replies.map(r => <Comment key={r.id} comment={r} />)}</ul>
)}
</li>
);
}- 1Mit einem
useEffect, der verschachtelte Antworten ins DOM einfügt - 2Mit einer rekursiven Komponente - das Composite-Muster für UI
- 3Nur als flache Liste; Rekursion ist in React verboten
Antwort zeigen
Richtige Antwort: Mit einer rekursiven Komponente - das Composite-Muster für UI
Erklärung
Knoten und Blätter werden gleich behandelt, also ruft die Komponente sich für ihre Kinder selbst auf. Für sehr tiefe oder große Bäume ergänzt man Virtualisierung oder „Mehr anzeigen“ und speichert die Daten normalisiert.