原生 dom 支持 dragstartdragend 等事件监听实现拖动。当然我们也可以利用 react-draggable 第三方库实现拖动,<Draggable>可以添加onStart、onStop及onDrag等事件回调函数,我们可以在这些事件中添加一些我们需要的逻辑。例如,我们可以给添加到list2数组列表中的对象动态添加一个唯一值id,用于我们区分同一个页面拖入两个相同组件的情况。
嵌套组件
我们利用 children 来实现组件的嵌套。list2就是最终页面渲染的组件列表,它是一个对象数组的数据结构,为了让它支持嵌套组件,我们需要在组件的元数据对象上增加一个属性,这个属性用来描述该组件下又嵌套了哪些组件,我们就命名这个属性为children。那么,包含嵌套组件的页面数据大致就是下面所示的样子:
React 搭建低代码平台
参考文章:
目录
低代码 (Low-Code Development, LCD):
🌈 低代码核心 - json 元数据 + React 数据驱动
低代码平台的关键:
而实现这一切的核心就在于:json 元数据 + React 数据驱动
在 React 中,数据驱动视图更新是其最推崇的开发哲学,我们关注点着眼于数据的更新,而不是像传统 HTML 界面搭建时如此注重真实 dom 元素。
React Virtual DOM (现为 React Fiber) 的本质就是一个描述元素信息的 json 对象,因此我们可以将真实 dom 抽象成各种带有不同描述信息的 json 对象保存,同样也可以将这些 json 对象通过 render 方法构建成真实 dom 进行展示。
❇️ 低代码核心其实就和 React 的核心渲染逻辑类似:通过组件 json 元数据拼装成一个页面的描述信息,然后通过渲染器组件将描述信息转化页面dom元素。若需要改变组件的展示形式,则只需要修改两者共同维护的那个 json 对象,就可以同步更新不同区域内同种复用组件的展示样式。
🌈 低代码开发平台架构
页面设计器
大多数的页面设计器都包含了如下所示的几个区域:
操作栏
: 页面的保存、预览、查看json信息、查看代码等操作;组件列表
:包含可复用的组件模板。当然也可以添加一些切换,让我们的左侧区域支持查看页面树信息、配置数据源等其他操作;画布
:展示区域。可以将左侧的组件拖动到画布中,当然也支持画布中组件的赋值、删除等操作;属性配置
:罗列当前选中组件可支持动态配置的属性,修改了属性后可以在画布中看到对应组件的样式变化。组件列表
组件列表中的每个组件,我们都需要使用一段
json
元数据 来进行描述。元数据中描述了当前组件的名称,在列表中显示的图标及描述,和组件可进行配置的一些动态属性。我们以输入框组件为例,它的元数据大致可以定义为如下的样子:
我们通过遍历元数据对象组成的数组来渲染组件列表。
拖动
组件列表的组件我们通过拖动的方式将它移动到画布中。
拖动又分为顺序排列布局拖动及自由布局拖动。
顺序排列布局拖动:拖动到画布中的组件是自上而下顺序排列的,可以通过拖动调整上下顺序,当然我们也可以增加分栏这样的布局类型组件,实现组件的左右排列;
自由布局拖动:拖动到画布中的组件位置是自由的,我们松开鼠标的位置,就是这个组件在画布中的位置。
低代码拖动实现组件从组件列表移动到画布的关键在于维护一个 json 元数据列表:
组件列表和画布分别定义了两个数组
list1
和list2
,并利用该数组进行遍历渲染。组件拖动到画布中的实现方式则是将某个组件的json
描述对象复制到list2
数组中。原生 dom 支持
dragstart
dragend
等事件监听实现拖动。当然我们也可以利用react-draggable
第三方库实现拖动,<Draggable>
可以添加onStart
、onStop
及onDrag
等事件回调函数,我们可以在这些事件中添加一些我们需要的逻辑。例如,我们可以给添加到list2
数组列表中的对象动态添加一个唯一值id
,用于我们区分同一个页面拖入两个相同组件的情况。嵌套组件
我们利用
children
来实现组件的嵌套。list2
就是最终页面渲染的组件列表,它是一个对象数组的数据结构,为了让它支持嵌套组件,我们需要在组件的元数据对象上增加一个属性,这个属性用来描述该组件下又嵌套了哪些组件,我们就命名这个属性为children
。那么,包含嵌套组件的页面数据大致就是下面所示的样子:属性配置区域
props
属性定义了这个组件能够进行动态控制的参数,我们只需要将这些参数以合适的表单形式展示在右侧的属性配置区域就可以了,例如,按钮组件的props
中有一个text
属性,用来控制按钮的显示文案,那么我们就在右侧属性控制区域用一个输入框来做为控制这个属性的表单形式。list2
中该组件所在的元数据对象,然后将该对象中props
属性中text
属性值修改为输入框中的内容。每个组件都会接受这个组件对应的元数据props
参数,然后根据参数值进行渲染。例如按钮组件,现在按钮的文案时,我们可以使用props.text
进行显示。