React DIV动态布局算法以创建框内视图

Question

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

我当时正在考虑创建一个通用的React组件，该组件可以存储一个数据对象，但又可以使该对象以某种动态机制接受子实例。

结果将是一个嵌套框类型视图，其中将显示所有元素和嵌套的子级。

• 子div需要具有某种布局功能（非常类似于流行的UI框架（material-ui，Scemantic-ui，Zurb Foundation）的网格布局功能

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

我什至不知道从哪里开始构建这样的东西。我正在寻找一些构建这样的UI的想法...在以后的阶段中的目的是使诸如React-draggable之类的东西能够拖动元素。

Answer 1

出于无限树结构渲染的目的，您可能需要查看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

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