Wzorce projektowe · Middle · Pytanie 11 z 75
Jak wyrenderować drzewo komentarzy dowolnej głębokości?
function Comment({ comment }) {
return (
<li>
{comment.text}
{comment.replies.length > 0 && (
<ul>{comment.replies.map(r => <Comment key={r.id} comment={r} />)}</ul>
)}
</li>
);
}- ✓Poprawna odpowiedź: Rekurencyjnym komponentem - wzorzec Composite dla UI
- 2Tylko jako płaską listę; rekurencja w React jest zabroniona
- 3Przez
useEffect, który wstawia zagnieżdżone odpowiedzi do DOM
Wyjaśnienie
Węzły i liście obsługuje się tak samo, więc komponent wywołuje sam siebie dla dzieci. Dla bardzo głębokich lub dużych drzew dodaj wirtualizację lub „Pokaż więcej”, a dane przechowuj znormalizowane.