Дерево комментариев
Условие
Комментарии с ответами: { id, text, replies }. Требования: · комментарий - <div class="comment" data-id={id}>, текст в <span class="text">; · у каждого есть <button class="reply"> - открывает <form class="form"> с <input class="input">; · отправка формы добавляет ответ в replies этого комментария и закрывает форму; · форма открыта не более чем у одного комментария одновременно; · пустой ответ не добавляется; · вложенность любой глубины.
Что проверяют тесты
рисует дерево
форма открывается по кнопке
добавляет ответ нужному узлу
форма закрывается после отправки
пустой ответ не добавляется
открыта не более одной формы
исходное дерево не мутируется
Как подойти
Две рекурсии: по отрисовке и по обновлению. Неизменяемое обновление вложенной структуры - главное, что здесь проверяют: копируем только узлы на пути к цели, остальные ветки переиспользуем по ссылке (это же даёт бесплатную оптимизацию для memo). Черновик текста держим локально в каждом комментарии, а идентификатор открытой формы - в корне, потому что требование «не больше одной» глобальное. Что назвать вслух: плоское хранилище по id вместо дерева при больших объёмах, оптимистичная вставка, свёртка длинных веток.
Подсказки: 3
- Компонент рекурсивный: комментарий рендерит комментарии.
- Вставка в дерево - рекурсивная функция, возвращающая новое дерево, а не мутация.
- Идентификатор комментария с открытой формой - одно значение на всё дерево.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.