CN116627402B - 一种基于React在低代码平台中实现自定义组件配置化的方法 - Google Patents

Abstract

本发明公开了一种基于React在低代码平台中实现自定义组件配置化的方法，包括创建React框架的平台组件，在平台组件上绑定一个低代码属性标识和一个暴露属性标识两个静态属性，在画布中绑定一次点击事件，通过低代码属性标识标识当前平台组件是一个低代码平台组件，当画布中存在点击时，复用React框架中的fiber的父子关系，快速识别出平台组件和对应的Html节点，进行平台组件的模拟选中和自定义配置。本发明具有极大的可扩展性及灵活性，对代码的侵入方式极小，更节省浏览器内存实用，特别是针对开放平台组件开发时，只需要加个标识即可成为平台可配置的组件。

Description

一种基于React在低代码平台中实现自定义组件配置化的 方法

技术领域

本发明属于计算机技术领域，具体涉及一种基于React在低代码平台中实现自定义组件配置化的方法。

背景技术

低代码平台是最近几年比较火的一个技术方向，其核心目标是让用户写更少的代码、通过拖拉组件的方式对自己的前端页面进行开发，用户不需要去关心前端的页面如何工程化打包、如何版本管理，只需要关心自己页面的逻辑实现。所以在低代码平台中，用户可操作的页面元素是平台提供的功能组件，在这些功能组件上组合完成页面开发，往往这些组件会暴露出一些属性配置，比如图片组件中URL地址等，可以让用户通过暴露的属性可视化的配置好组件的各个属性。一般来说，平台中提供的一个组件中都是由多个Html节点组成，当用户点击画布中的元素时，浏览器只会暴露当前触发点击的Html节点，并不能很好的区分出是哪个低代码组件被点击了，而我们需要通过识别被点击的组件来获取其可视化的配置，比如图片的地址属性、输入框的值属性等，不同组件有不同的配置，所以如何识别是哪个组件别点击、选中是不可缺失的一环。

现有技术中，通过在低代码组件上绑定点击事件能获取到点击的组件，选中效果(选中组件的边框)必须耦合到低代码平台的设计器中，缺少了灵活性，而且每个组件中都会绑定一个点击事件，无疑增加了浏览器内存的消耗。

发明内容

本发明要解决的技术问题是：提供一种基于React在低代码平台中实现自定义组件配置化的方法，以至少解决上述部分技术问题。

为实现上述目的，本发明采用的技术方案如下：

一种基于React在低代码平台中实现自定义组件配置化的方法，包括：

步骤1、创建React框架的平台组件；

步骤2、在平台组件上绑定一个低代码属性标识和一个暴露属性标识两个静态属性，所述低代码属性标识用于标识该平台组件为一个低代码平台组件，所述暴露属性标识用于存储该平台组件想暴露的可配置属性；

步骤3、在低代码平台画布的画布节点上绑定一个点击事件，设置父节点为相对定位模式、选中节点为绝对定位模式；

步骤4、将平台组件拖入到低代码平台画布的画布节点中显示；

步骤5、点击低代码平台画布中任意元素，触发画布节点上的点击事件，获取所述点击事件的对象属性；

步骤6、从点击事件中获取触发的点击元素，基于所述点击事件的对象属性提取该点击元素的fiber节点，从该fiber节点的React fiber链表向上遍历其父节点，寻找该平台组件；

步骤7、基于低代码属性标识，判断该平台组件是否为低代码平台组件，当平台组件为低代码平台组件，提取该平台组件的可配置属性并解析，进行平台组件的可视化展示和配置；

步骤8、从提取的fiber节点向下遍历其子元素，遍历到的第一个Html节点类型，则为所述平台组件的实际Html节点，该实际Html节点包含平台组件下的所有Html节点；

步骤9、获取实际Html节点的位置、宽高信息，设置选中节点样式进行平台组件的模拟选中。

进一步地，所述低代码属性标识为平台组件函数上绑定的一个静态属性，并将该静态属性赋值为真。

进一步地，在所述步骤6中，通过React fiber链表向上遍历其父节点，寻找该平台组件，若平台组件函数上存在静态属性，则平台组件为低代码平台组件。

进一步地，所述暴露属性标识为一个数组，该数组包含了可配置属性的名称、值、配置类型。

进一步地，在所述步骤7中，提取平台组件的可配置属性，由属性配置节点进行解析，展示给用户进行可视化配置，将用户填写的信息存储成数据结构，然后传递到平台组件内部进行使用，实现平台组件的属性配置。

进一步地，根据暴露属性中的配置类型进行平台组件的可配置属性解析，自行添加约定属性。

进一步地，在所述步骤6中，从点击事件中获取触发的点击元素，根据点击事件的对象属性触发点击的DOM节点，提取DOM节点上对应的fiber节点。

进一步地，所述步骤9包括：通过浏览器内置方法，获取实际Html节点的位置、宽高信息，然后在画布上显示选中效果，由位置、宽高信息设置选中节点样式进行平台组件的模拟选中。

进一步地，选中节点样式包括父节点的相对定位信息和选中框的大小。

进一步地，当父节点的相对定位信息与平台组件位置一致，并且选中框的大小与平台组件大小相同时，完成了平台组件的选中，平台组件位置由实际Html节点的位置得到，平台组件大小由实际Html节点的宽高得到。

与现有技术相比，本发明具有以下有益效果：

本发明基于React Fiber链表，只需要在画布绑定一次点击事件，通过平台组件绑定低代码属性标识识别当前是一个平台组件，当画布中存在点击时，复用React框架中的fiber节点的父子关系，快速识别出平台组件和其对应的Html节点，从而选中平台组件进行后续操作。本发明具有极大的可扩展性及灵活性，对代码的侵入方式极小，更节省浏览器内存实用，特别是针对开放平台组件开发时，只需要添加个低代码属性标识即可成为平台可配置的组件。

附图说明

图1为本发明的方法流程图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进一步详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，本发明提供的一种基于React在低代码平台中实现自定义组件配置化的方法，包括：

步骤1、创建React框架的平台组件；

步骤2、在平台组件上绑定一个低代码属性标识和一个暴露属性标识两个静态属性，所述低代码属性标识用于标识该平台组件为一个低代码平台组件，所述暴露属性标识用于存储该平台组件想暴露的可配置属性；

步骤3、在低代码平台画布的画布节点上绑定一个点击事件，设置父节点为相对定位模式、选中节点为绝对定位模式；

步骤4、将平台组件拖入到低代码平台画布的画布节点中显示；

步骤5、点击低代码平台画布中任意元素，触发画布节点上的点击事件，获取所述点击事件的对象属性；

步骤6、从点击事件中获取触发的点击元素，基于所述点击事件的对象属性提取该点击元素的fiber节点，从该fiber节点的React fiber链表向上遍历其父节点，寻找该平台组件；

步骤7、基于低代码属性标识，判断该平台组件是否为低代码平台组件，当平台组件为低代码平台组件，提取该平台组件的可配置属性并解析，进行平台组件的可视化展示和配置；

步骤8、从提取的fiber节点向下遍历其子元素，遍历到的第一个Html节点类型，则为所述平台组件的实际Html节点，该实际Html节点包含平台组件下的所有Html节点；

步骤9、获取实际Html节点的位置、宽高信息，设置选中节点样式进行平台组件的模拟选中。

React是前端开发中使用的一种Javascript框架，通过JSX的方式去操作页面的DOM元素，以其核心的虚拟DOM的fiber架构实现页面的分片渲染，保证页面渲染的流畅性。其中fiber是一个双向链表，在React框架中，函数组件Html节点都是一个fiber节点。本发明基于React Fiber链表，只需要在画布绑定一次点击事件，通过平台组件绑定低代码属性标识识别当前是一个平台组件，当画布中存在点击时，复用React框架中的fiber节点的父子关系，快速识别出平台组件和其对应的Html节点，从而选中平台组件进行后续操作。本发明具有极大的可扩展性及灵活性，对代码的侵入方式极小，更节省浏览器内存实用，特别是针对开放平台组件开发时，只需要添加个低代码属性标识即可成为平台可配置的组件。

步骤1为开发一个React框架的平台组件，通过声明React函数的一个组件实现。

步骤2中，所述低代码属性标识，例如LowCode（本发明中可以为任意名）为平台组件函数上绑定的一个静态属性，并将该静态属性赋值为真，低代码属性标识目的为标识该平台组件为一个低代码平台组件。

步骤2中，所述暴露属性标识为一个数组，例如properties（可以为任意名），该数组包含了可配置属性的名称(name)、值(value)、配置类型(type)。具体通过在该平台组件上绑定properties属性，赋值可配置的属性，其属性用户可自定义配置。在低代码平台中，需要配置平台中的平台组件的各个属性，一般来说，一个平台组件会有很多个可配置项，每个平台组件的配置项也不相同，所以通过数组存储当前平台组件可以配置的信息，并且作为静态属性绑定到平台组件上。

步骤3为在低代码平台画布的画布节点（Canvas Html）上绑定一个点击事件，设置父节点（Parent Html）为相对定位模式、选中节点（CheckHtml）为绝对定位模式。具体通过声明一个函数并绑定，当点击低代码平台画布时调用此函数，此函数接收一个参数事件，即浏览器触发的点击事件，浏览器传入该点击事件；然后在低代码画布的DOM节点上绑定一个点击事件，通过所述声明的函数进行处理。其中，整个浏览器页面的Html节点包括浏览器Html的根节点body、父节点Parent Html（一般用div实现，负责包裹选中节点和父节点，样式为绝对定位模式，其中div是html节点）、选中节点CheckHtml（一般用div实现，相对父节点定位，主要是在页面上呈现选中的样式，比如显示选中组件的边框等，样式为相对定位模式，其中div是html节点）、画布节点Canvas Html（一般用iframe包裹实现，负责渲染用户拖拽的组件，用户操作的主要区域，其中iframe是html节点）、属性配置节点PropertiesHtml（一般用div实现，主要是解析选中组件的绑定的可配置属性属性并显示，其中div是html节点）。

步骤4为将平台组件拖入到低代码平台画布的画布节点(低代码的页面拖拽编辑的地方）中显示。

步骤5为点击低代码平台画布中任意元素，触发画布节点上的点击事件，获取所述点击事件的对象属性。所述对象属性target用于触发点击的DOM节点。

步骤6为从点击事件中获取触发的点击元素，根据React框架中获取此点击元素的fiber节点，fiber节点是虚拟化DOM节点的一个js对象，fiber节点和DOM节点一一对应，在DOM节点上也存储了对应的fiber节点，DOM节点上有一个以__reactFiber开头的属性即是对应fiber节点，通过所述点击事件的对象属性target获取到DOM节点，再获取DOM节点对应的fiber节点，并从当前点击元素React fiber链表向上遍历其父节点，寻找对应的平台组件。fiber节点中类型属性（type）是当前渲染的组件，即存储的该平台组件。

步骤7为通过React fiber链表向上遍历其父节点，寻找该平台组件，若平台组件函数上存在静态属性，则平台组件为低代码平台组件。然后提取平台组件的可配置属性，由属性配置节点PropertiesHtml进行解析，展示给用户进行可视化配置，将用户填写的信息存储成一定的数据结构，然后把这个数据结构作为平台组件的props(react组件传递数据的一种方式)传递到平台组件内部进行使用，实现平台组件的属性配置。

步骤8为从提取的fiber节点向下遍历其子元素，遍历到的第一个Html节点类型，则为所述平台组件的实际Html节点，该实际Html节点包含平台组件下的所有Html节点。

步骤9为获取实际Html节点，通过DOM方法获取其宽高、位置等信息，设置选中节点样式进行平台组件的模拟选中。获取实际Html节点的位置具体为：通过浏览器内置方法getClientRects，top会返回相对定位父节点Parent Html的Y轴位置，left会返回相对定位父节点Parent Html的X轴位置，由此X轴位置和Y轴位置得到实际Html节点的位置。获取实际Html节点的位置具体为：通过实际Html节点的偏移宽度offsetWidth和偏移高度offsetHeight获得实际Html节点的宽和高。再根据实际Html节点位置和宽和高得到平台组件的位置和大小，在画布上显示选中效果，设置选中节点heckHtml样式，进行平台组件的模拟选中。选中节点样式包括父节点的相对定位信息和选中框的大小，当父节点的相对定位信息与平台组件位置一致，并且选中框的大小与平台组件大小相同时，完成了平台组件的选中。

本发明通过以上的方式识别了平台组件，并获取到平台组件的可配置信息以及位置信息，进行组件的选中及其配置操作。

最后应说明的是：以上各实施例仅仅为本发明的较优实施例用以说明本发明的技术方案，而非对其限制，当然更不是限制本发明的专利范围；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围；也就是说，但凡在本发明的主体设计思想和精神上作出的毫无实质意义的改动或润色，其所解决的技术问题仍然与本发明一致的，均应当包含在本发明的保护范围之内；另外，将本发明的技术方案直接或间接的运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种基于React在低代码平台中实现自定义组件配置化的方法，其特征在于，包括：

步骤1、创建React框架的平台组件；

步骤2、在平台组件上绑定一个低代码属性标识和一个暴露属性标识两个静态属性，所述低代码属性标识用于标识该平台组件为一个低代码平台组件，所述暴露属性标识用于存储该平台组件想暴露的可配置属性；

步骤3、在低代码平台画布的画布节点上绑定一个点击事件，设置父节点为相对定位模式、选中节点为绝对定位模式；

步骤4、将平台组件拖入到低代码平台画布的画布节点中显示；

步骤5、点击低代码平台画布中任意元素，触发画布节点上的点击事件，获取所述点击事件的对象属性；

步骤6、从点击事件中获取触发的点击元素，基于所述点击事件的对象属性提取该点击元素的fiber节点，从该fiber节点的React fiber链表向上遍历其父节点，寻找该平台组件；

步骤7、基于低代码属性标识，判断该平台组件是否为低代码平台组件，当平台组件为低代码平台组件，提取该平台组件的可配置属性并解析，进行平台组件的可视化展示和配置；

步骤8、从提取的fiber节点向下遍历其子元素，遍历到的第一个Html节点类型，则为所述平台组件的实际Html节点，该实际Html节点包含平台组件下的所有Html节点；

步骤9、获取实际Html节点的位置、宽高信息，设置选中节点样式进行平台组件的模拟选中。

2.根据权利要求1所述的一种基于React在低代码平台中实现自定义组件配置化的方法，其特征在于，所述低代码属性标识为平台组件函数上绑定的一个静态属性，并将该静态属性赋值为真。

3. 根据权利要求2所述的一种基于React在低代码平台中实现自定义组件配置化的方法，其特征在于，在所述步骤6中，通过React fiber链表向上遍历其父节点，寻找该平台组件，若平台组件函数上存在静态属性，则平台组件为低代码平台组件。

4.根据权利要求1所述的一种基于React在低代码平台中实现自定义组件配置化的方法，其特征在于，所述暴露属性标识为一个数组，该数组包含了可配置属性的名称、值、配置类型。

5.根据权利要求4所述的一种基于React在低代码平台中实现自定义组件配置化的方法，其特征在于，在所述步骤7中，提取平台组件的可配置属性，由属性配置节点进行解析，展示给用户进行可视化配置，将用户填写的信息存储成数据结构，然后传递到平台组件内部进行使用，实现平台组件的属性配置。

6.根据权利要求4所述的一种基于React在低代码平台中实现自定义组件配置化的方法，其特征在于，根据暴露属性中的配置类型进行平台组件的可配置属性解析，自行添加约定属性。

7.根据权利要求1所述的一种基于React在低代码平台中实现自定义组件配置化的方法，其特征在于，在所述步骤6中，从点击事件中获取触发的点击元素，根据点击事件的对象属性触发点击的DOM节点，提取DOM节点上对应的fiber节点。

8.根据权利要求1所述的一种基于React在低代码平台中实现自定义组件配置化的方法，其特征在于，所述步骤9包括：通过浏览器内置方法，获取实际Html节点的位置、宽高信息，然后在画布上显示选中效果，由位置、宽高信息设置选中节点样式进行平台组件的模拟选中。

9.根据权利要求8所述的一种基于React在低代码平台中实现自定义组件配置化的方法，其特征在于，选中节点样式包括父节点的相对定位信息和选中框的大小。

10.根据权利要求9所述的一种基于React在低代码平台中实现自定义组件配置化的方法，其特征在于，当父节点的相对定位信息与平台组件位置一致，并且选中框的大小与平台组件大小相同时，完成了平台组件的选中，平台组件位置由实际Html节点的位置得到，平台组件大小由实际Html节点的宽高得到。