Рекурсивное рисование дерева с помощью CSS
Я пытаюсь рекурсивно нарисовать дерево на основе набора данных. К каждому элементу уровня 0 добавляется класс category (с полужирным шрифтом), каждому элементу уровня 1 добавляется group и добавляется уровень 2 leaf. Это дерево можно нарисовать до двух уровней. Но когда я рекурсивно рисую дерево, все уровни получают жирный стиль, а наведение мыши также применяется ко всему, а не к каждому уровню.
Вот песочница, которая показывает оба дерева, одно нарисовано с помощью рекурсии, другое жестко закодировано с помощью css: https://codesandbox.io/s/tree-compared-9s828h
Может кто-нибудь сказать мне, что не так в рекурсивном подходе.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Не визуализируйте детей внутри родителя. Визуализируйте их как новую строку, обернув оба фрагментом Fragment (<>...</>). Фрагмент не создает новый элемент DOM и позволяет рекурсивно отображать плоский список, например статическое дерево.
Код (песочница):
return (
<>
<div
className = {`list-row level-${level} ${categoryType}`}
onClick = {onClickNode}
key = {`${node.key}`}
>
<div className = "list-item-holder">
{hasChildren && (
<div className = "list-item-expander-holder">
<span
className = {`expand-collapse-icon ${isLeaf ? '' : 'expand'}`}
>
<span className = "collapse-icon">
<FontAwesomeIcon icon = "caret-down" />
</span>
<span className = "expand-icon">
<FontAwesomeIcon icon = "caret-right" />
</span>
</span>
</div>
)}
<div className = "list-item-details-holder">{node.name}</div>
</div>
</div>
{hasChildren && (
<div className = "list-row-children">
{node.categories.map((category) => renderNode(category, level + 1))}
</div>
)}
</>
);
Вам нужно добавить правильные правила CSS для каждого уровня. Обратите внимание, что теперь у вас также есть уровень 3. Чтобы динамически разворачиваться и сворачиваться, вам нужно создать компонент с состоянием для уровня.
Создайте компонент для уровней. Компонент должен содержать JSX текущего элемента и дочерних элементов. Каждый компонент должен иметь открытое состояние (useState()), и вы можете переключать состояние, щелкая уровень.
Смотрите обновленную песочницу. Обратите внимание, как я преобразовал функцию в компонент с состоянием.
Ори Дори, спасибо за ответ, каким-то образом
level-1элементы приближаются к крайнему левому краю по сравнению с жестко запрограммированным деревом. Рассмотрим,WindowsиVS Code. Также как я могу динамически расширять и сворачивать каждый элемент? . codeandbox.io/s/tree-compared-forked-bqgjq2?file=/src/data.js