Дерево с раскрытием
Условие
Дерево по узлам вида { id, name, children }. Требования: · каждый узел - <li class="node" data-id={id}>; · у узла с детьми есть <button class="toggle"> - раскрывает и сворачивает; · дети раскрытого узла лежат во вложенном <ul>; · изначально всё свёрнуто; · у листьев кнопки раскрытия нет; · глубина любая.
Что проверяют тесты
изначально свёрнуто
раскрывает и сворачивает
у листа нет кнопки
работает на любой глубине
узлы раскрываются независимо
Как подойти
Два решения, и выбор между ними - суть задачи. Состояние внутри каждого узла проще, но теряется при перемонтировании и не позволяет управлять деревом снаружи («раскрыть всё», «раскрыть до элемента»). Одно множество в корне решает это ценой прокидывания пропсов. Set обновляется копией: new Set(prev), иначе ссылка та же и рендера не будет. Что назвать вслух: ленивая подгрузка детей, виртуализация длинных деревьев, роли treeitem и навигация стрелками.
Подсказки: 3
- Рекурсивный компонент: узел рендерит сам себя для каждого ребёнка.
- Состояние раскрытия - одно множество идентификаторов на всё дерево, а не флаг внутри каждого узла.
- Set нельзя менять на месте - React не увидит изменения, нужен новый Set.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.