(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210795475.9 (22)申请日 2022.07.07 (71)申请人 安天科技 集团股份有限公司 地址 150028 黑龙江省哈尔滨市高新 技术 产业开发区科技创新城创新创业广场 7号楼 （世坤路838号） (72)发明人 王瑞鹏　张道林　庞齐　白建军　 肖新光　 (74)专利代理 机构 北京科衡知识产权代理有限 公司 11928 专利代理师 王淑静 (51)Int.Cl. G06F 9/445(2018.01) (54)发明名称 React组件配置方法、 系统、 电子设备及存储 介质 (57)摘要 本发明实施例公开一种React组件配置方 法、 系统、 电子设备及存储介质， 涉及前端开发技 术领域。 所述方法包 括： 将所述React组件Render 中的渲染代码拆 分成多个模块； 对 所述多个模块 分别以函数的形式封装成模块组件； 所述模块组 件根据接收参数进行渲染， 返回对应的渲染效 果； 将与渲染逻辑和参数请求无关的函数封装至 公用函数 组件； 将所述模块组件与公用函数组件 中的函数暴露出来， 以供调用。 本发明通过将原 始组件内的渲染部分和公用逻辑部分抽离， 可以 在一定程度上降低组件的冗余， 从而有利于提高 组件的可复用性及可维护性； 适用于网页、 用户 界面等前端开发场景中。 权利要求书2页 说明书6页 附图3页 CN 115237492 A 2022.10.25 CN 115237492 A 1.一种React组件配置方法， 其特 征在于， 所述方法包括 步骤： 将所述React组件Render中的渲染代码拆分成多个模块； 对所述多个模块分别以函数的形式封装成模块组件； 所述模块组件根据接收参数进行 渲染， 返回对应的渲染效果； 将与渲染逻辑和参数请求无关的函数封装至公用函数组件； 将所述模块组件与公用函数组件中的函数暴露出来， 以供调用。 2.根据权利要求1所述的React组件配置方法， 其特征在于， 在所述将所述模块组件与 公用函数组件中的函数暴露出来， 以供调用之后， 所述方法还包括： 当React组件需要利用 至少一个所述模块组件和/或公用函数组件进行页面预定功能渲 染时， 在React组件中引入 所述模块组件和/或公用函数组件。 3.根据权利要求2所述的React组件配置方法， 其特征在于， 所述在React组件中引入所 述模块组件和/或公用函数组件 包括： 通过所述函数提供的调用接口， 调用所述模块组件和/或公用函数组件； 接收所述模块组件和/或公用函数组件传入的属性 参数； 基于所述属性 参数进行渲染， 返回html代码。 4.根据权利要求3所述的React组件配置方法， 其特征在于， 所述在React组件中引入所 述模块组件和/或公用函数组件 包括： 通过所述函数提供的调用接口， 调用所述模块组件和/或公用函数组件； 所述模块组件 和/或公用函数组件自定义有用于实现页面预定功能渲染的属性 参数； 基于所述属性 参数进行渲染， 返回html代码。 5.根据权利 要求3或4所述的React组件配置方法， 其特征在于， 所述通过所述函数提供 的调用接口， 调用所述模块组件 包括： 根据页面预定功能， 引 入与所述页面预定功能对应的第一模块组件； 在组件Render中 通过所述第一模块组件暴露的函数调用所述第一模块组件。 6.根据权利要求3所述的React组件配置方法， 其特征在于， 所述公用函数组件创建于 页面级别组件同目录下。 7.一种React组件配置系统， 其特 征在于， 所述系统包括： 拆分程序单 元， 用于将所述React组件Render中的渲染代码拆分成多个模块； 第一封装程序单元， 用于对所述多个模块分别以函数的形式封装成模块组件； 所述模 块组件根据接收参数进行渲染， 返回对应的渲染效果； 第二封装程序单 元， 用于将与渲染逻辑和参数请求无关的函数封装至公用函数组件； 暴露程序单 元， 用于将所述模块组件与公用函数组件中的函数暴露出来， 以供调用。 8.根据权利 要求7所述的React组件配置系统， 其特征在于， 所述系统还包括： 引入程序 单元， 用于在所述将所述模块组件与公用函数组件中的函数暴露出来， 以供调用之后， 当 React组件需要利用至少一个所述模块组件和/或公用函数 组件进行页面预定功能渲 染时， 在React组件中引入所述模块组件和/或公用函数组件。 9.根据权利要求8所述的React组件配置系统， 其特 征在于， 所述引入程序单 元包括： 调用程序模块， 用于通过所述函数提供的调用接口， 调用所述模块组件和/或公用函数 组件；权　利　要　求　书 1/2 页 2 CN 115237492 A 2接收程序模块， 用于 接收所述模块组件和/或公用函数组件传入的属性 参数； 渲染程序模块， 用于基于所述属性 参数进行渲染， 返回html代码。 10.根据权利要求8所述的React组件配置系统， 其特 征在于， 所述引入程序单 元包括： 调用程序模块， 用于通过所述函数提供的调用接口， 调用所述模块组件和/或公用函数 组件； 所述模块组件和/或公用函数组件自定义有用于实现页面预定功能渲染的属性 参数； 渲染程序模块， 用于基于所述属性 参数进行渲染， 返回html代码。 11.一种电子设备， 其特征在于， 包括： 一个或者多个处理器； 存储器； 所述存储器中存 储有一个或者多个可执行程序， 所述一个或者多个处理器读取存储器中存储的可执行程序 代码， 运行与可执行程序代码对应的程序， 以用于执行权利要求 1至6任一所述的React组件 配置方法。 12.一种计算机可读存储介质， 其特征在于， 所述计算机可读存储介质存储有一个或者 多个程序， 所述一个或者多个程序可被一个或者多个处理器执行， 以实现前述权利要求 1至 6任一所述的React组件配置方法。权　利　要　求　书 2/2 页 3 CN 115237492 A 3