Патерни проєктування · Middle · Запитання 11 з 75
Як рендерити дерево коментарів довільної вкладеності?
function Comment({ comment }) {
return (
<li>
{comment.text}
{comment.replies.length > 0 && (
<ul>{comment.replies.map(r => <Comment key={r.id} comment={r} />)}</ul>
)}
</li>
);
}- ✓Правильна відповідь: Рекурсивним компонентом - це патерн Компонувальник для UI
- 2Лише пласким списком, рекурсія в React заборонена
- 3Через
useEffect, що вставляє вкладені відповіді в DOM
Пояснення
Вузол і листок обробляються однаково, тому компонент викликає сам себе для дочірніх елементів. Для дуже глибоких або великих дерев додають віртуалізацію чи «Показати ще», а дані зберігають нормалізовано.