Блог

Я пытаюсь представить следующее на веб-странице. — это представление модели данных, иллюстрирующее объекты, атрибуты и дочерние объекты в родительской дочерней иерархии.

Я думал создать универсальный компонент React, который мог бы хранить один объект данных, но затем также заставить этот же объект принимать дочерние экземпляры в виде динамического механизма.

Результатом будет представление типа вложенного окна, в котором будут отображаться все элементы и вложенные дочерние элементы.

• дочерний div должен иметь какую-то функцию компоновки (очень похожую на функции компоновки сетки популярных фреймворков пользовательского интерфейса (material-ui, Scemantic-ui, Zurb foundation)

в конце «модель» будет выглядеть примерно так.

Я даже не знаю, с чего начать создавать что-то подобное. Я ищу несколько идей для создания подобного пользовательского интерфейса… на более позднем этапе было бы предложено включить что-то вроде React-draggable, чтобы разрешить перетаскивание элементов.

Для целей визуализации бесконечной древовидной структуры вам может потребоваться посмотреть на использование рекурсии в React. Я нашел для вас несколько ресурсов:

• https://dev.to/baso53/recursive-rendering-in-react-building-a-universal-json-renderer-f59
• https://medium.com/@suraj.rajan/recursion-using-reactjs-components-3c871f99fb2f

По сути, вам нужно создать функцию в классе, которая возвращает экземпляр вашего класса.