React DIV动态布局算法以创建盒中盒视图

问题描述 投票:0回答:1

我试图在网页上代表以下内容。 - 这是一个数据模型表示,说明父子层次结构中的对象,属性和子对象。

enter image description here

我正在考虑创建一个能够存储单个数据对象的通用React组件,但同时也让该对象以一种动态机制接受子实例。

结果将是嵌套框类型视图,它将显示所有元素和嵌套子元素。

  • 子div,需要有某种布局功能(很像流行的UI框架的网格布局功能(material-ui,Scemantic-ui,Zurb基础)enter image description here

最后,“模型”看起来像这样。

enter image description here

我甚至不知道从哪里开始构建这样的东西。我正在寻找一些想法来构建这样的UI ......稍后阶段的意图是启用像React-draggable这样的东西来允许拖动元素。

javascript css reactjs html5 user-interface
1个回答
1
投票

对于无限的树结构呈现目的,您可能需要查看React中的递归用法。我找到了一些资源给你:

基本上,您需要在类中创建一个函数,该函数返回您的类的实例。

© www.soinside.com 2019 - 2024. All rights reserved.