Реагируйте на алгоритм динамической разметки DIV, чтобы создать представление в виде коробки - PullRequest
0 голосов
/ 17 апреля 2019

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

enter image description here

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

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

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

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

enter image description here

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

1 Ответ

1 голос
/ 17 апреля 2019

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...