1、组件
1、概述
- 组件分为俩种,编辑器编辑型组件,渲染引擎渲染型组件。
- 构建编辑器中可编辑基础元素由两部分构成,基础元素组件、可编辑方法,可编辑方法会提供编辑能力赋予基础组件,基础组件负责渲染。
2、组件介绍
1、template模块下编辑型组件创建
编辑型组件分为两种,可编辑组件、可编辑元素。
1、图示
2、可编辑组件
- withEditableComponent 可编辑组件高阶组件,可生成可编辑组件
- 可编辑组件上下文注入(查看 context 上下文)
3、可编辑元素
- withEditableElement 可编辑元素高阶组件
- 可编辑元素上下文注入(查看 context 上下文)
- 可编辑元素根据不同的元素配置进行组件渲染,可编辑元素组件列表:
可编辑元素组件(名称不固定) | 基础元素组件 | 基础元素引用 | 可编辑方法 | 可编辑方法引用 |
---|---|---|---|---|
EditableImage | Image | @fe-plugin/components/lib/templates/cmps/image | withEditableImage | import { withEditableImage, withEditableButton, withEditableText, withEditableDialog, withEditableInput, withEditableTextarea, withEditableFileUploader, withEditableShape } from "@fe-plugin/components/lib/templates/editable-element"; |
EditableButton | Button | @fe-plugin/components/lib/templates/cmps/button | withEditableButton | |
EditableText | <p>、<article>标签 | 原生标签 | withEditableText | |
EditableDialog | Dialog | @fe-plugin/components/lib/templates/cmps/dialog | withEditableDialog | |
EditableInput | Input | @fe-plugin/components/lib/templates/cmps/input | withEditableInput | |
EditableTextarea | Textarea | @fe-plugin/components/lib/templates/cmps/textarea | withEditableTextarea | |
EditableFileUploader | FileUploader | @fe-plugin/components/lib/templates/cmps/file-uploader | withEditableFileUploader | |
EditableShape | Shape | @fe-plugin/components/lib/templates/cmps/shape | withEditableShape |
4、示例:
构建可编辑组件、可编辑元素
import React from "react"; import { withEditableComponent } from "@fe-plugin/components/lib/templates/editable-component"; import { withEditableText } from "@fe-plugin/components/lib/templates/editable-element"; import BaseButton from "@fe-plugin/components/lib/templates/cmps/button"; // 创建一个可编辑组件 const EditableComponent = withEditableComponent(); // 根据元素配置的key值创建一个可编辑元素 const EditableButton = withEditableButton("元素key值")((element) => { return <BaseButton data={element} style={element.style} />; }); // 编辑器组件的渲染(一个带有可编辑按钮元素的组件) function EditerCmpRender() { return ( <EditableComponent> <EditableButton /> </EditableComponent> ); }
2、main模块下渲染型组件创建
渲染引擎渲染组件,有main模块引用,需要与编辑器可编辑组件对应渲染,并且需要附加逻辑。
基础组件名称 | 渲染组件引入 |
---|---|
Button | @fe-plugin/components/lib/h5/cmps/button |
Image | @fe-plugin/components/lib/h5/cmps/image |
Text | @fe-plugin/components/lib/h5/cmps/text |
Dialog | @fe-plugin/components/lib/h5/cmps/Dialog |
Input | @fe-plugin/components/lib/h5/cmps/input |
Textarea | @fe-plugin/components/lib/h5/cmps/textarea |
FileUploader | @fe-plugin/components/lib/h5/cmps/file-uploader |
公共组件名称 | 渲染组件引入 |
ConfirmDialog 确认弹窗 | @fe-plugin/components/lib/h5/confirm-dialog |
QrCode 二维码组件 | @fe-plugin/components/lib/h5/qrcode |
示例:
import React from "react"; import Button from "@fe-plugin/components/lib/h5/cmps/button"; export default function RenderButton(props) { const handleClick = () => { console.log("处理按钮的点击事件"); }; //从外部到element元素数据 填充 return <Button data={props.element} onClick={handleClick} />; }
2、渲染
了解组件的类型,与创建后,不同模块最终需要对组件进行组合,形成最终的渲染。
1、main模块组件渲染
引入main模块上下文(点击查看main模块的创建)
创建渲染组件(点击查看渲染型组件创建)
内置页的引用(点击查看main模块下内置页创建)
示例:创建一个main组件
import React from "react"; import { DependencyContext } from "@fe-plugin/components/lib/context"; import { getComponentInfo } from "@fe-plugin/common/lib/component-info"; import { getElementByKey } from "@fe-plugin/common/lib/component-element"; import * as ELEMENT_KEY from "constants/element-keys"; //创建main组件 class Main extends React.Component { // 获取上下文 static contextType = DependencyContext; // 处理逻辑 hanldeClick() { console.log("点击了按钮"); } render() { // 从上上下文获取 配置 const { config } = this.context; // 获取信息,并创建获取element的方法 const componentInfo = getComponentInfo(config); const getElement = (type) => getElementByKey(componentInfo.elements, type); return ( <div> <Button data={getElement(ELEMENT_KEY.BTN_A)} onClick={() => hanldeClickAnswerButton()} /> </div> ); } } export default Main;
2、template模块组件渲染
引入template模块上下文(点击查看template模块的创建 )
创建可编辑组件(点击查看编辑型组件创建)
内置页的引用(点击查看template模块下内置页创建)
示例:创建一个template组件
import React from "react"; import { DependencyContext } from "@fe-plugin/components/lib/context"; import { getComponentInfo } from "@fe-plugin/common/lib/component-info"; import { withEditableComponent } from "@fe-plugin/components/lib/templates/editable-component"; import { withEditableButton } from "@fe-plugin/components/lib/templates/editable-element"; import BaseButton from "@fe-plugin/components/lib/templates/cmps/button"; import * as ELEMENT_KEY from "constants/element-keys"; // 创建一个可编辑组件 const EditableComponent = withEditableComponent(); // 编辑器舞台编辑组件 class Template extends React.Component { //获取上下文 static contextType = DependencyContext; // 渲染组件 renderCmp() { // 根据元素配置的key值创建一个可编辑元素 const EditableButton = withEditableButton(ELEMENT_KEY.Button)((element) => { return <BaseButton data={element} style={element.style} />; }); return ( <EditableComponent> <div> <EditableButton /> </div> </EditableComponent> ); } } export default Template;
3、setting模块组件渲染
渲染setting模块需要以下步骤:
1、在default-setting中将 hasComponentSetting 设置为 true
2、在模块入口传入onChange、initValue参数,提供数据初始化,数据更改等功能(点击查看模块入口)
示例:创建一个setting组件
import React from "react"; import { DependencyContext } from "@fe-plugin/components/lib/context"; import { getComponentInfo } from "@fe-plugin/common/lib/component-info"; import { withEditableComponent } from "@fe-plugin/components/lib/templates/editable-component"; import { withEditableButton } from "@fe-plugin/components/lib/templates/editable-element"; import BaseButton from "@fe-plugin/components/lib/templates/cmps/button"; import * as ELEMENT_KEY from "constants/element-keys"; // 创建一个可编辑组件 const EditableComponent = withEditableComponent(); // 编辑器舞台编辑组件 class Template extends React.Component { //获取上下文 static contextType = DependencyContext; // 渲染组件 renderCmp() { // 根据元素配置的key值创建一个可编辑元素 const EditableButton = withEditableButton(ELEMENT_KEY.Button)((element) => { return <BaseButton data={element} style={element.style} />; }); return ( <EditableComponent> <div> <EditableButton /> </div> </EditableComponent> ); } } export default Template;
3、内置页
template、main模块中存在的弹出层模块,称之为内置页,可做组件的弹出层逻辑渲染。
1、template组件中的内置页
内置页在template模块中创建使用可编辑型组件创建。
示例:termplate模块中内置页的创建
import React from "react"; import { withEditableButton, withEditableDialog, } from "@fe-plugin/components/lib/templates/editable-element"; import { getComponentInfo } from "@fe-plugin/common/lib/component-info"; import { getElementByKey } from "@fe-plugin/common/lib/component-element"; import BaseDialog from "@fe-plugin/components/lib/templates/cmps/dialog"; import BaseButton from "@fe-plugin/components/lib/templates/cmps/button"; import * as ELEMENT_KEY from "constants/element-keys"; // 编辑器舞台编辑组件 class InlinePage extends React.Component { //获取上下文 static contextType = DependencyContext; render() { const { config } = this.context; // 获取信息,并创建获取element的方法 const componentInfo = getComponentInfo(config); const getElement = (type) => getElementByKey(componentInfo.elements, type); // 获取弹窗元素 const dialogElement = getElement(ELEMENT_KEY.POPUP_DIALOG); // 根据元素配置的key值创建一个可编辑元素 const EditableButton = withEditableDialog(ELEMENT_KEY.Button)((element) => { return <BaseButton data={element} style={element.style} />; }); const EditableDialog = withEditableButton(ELEMENT_KEY.Dialog)((element) => { return ( <BaseDialog data={element}> <EditableButton /> </BaseDialog> ); }); return ( <Dialog name={ELEMENT_KEY.POPUP_DIALOG}> <EditableDialog /> </Dialog> ); } } export default InlinePage;
2、main组件中的内置页
内置页在main模块中的创建使用渲染型组件创建。
示例:main模块中内置页的创建
import React from "react"; import Dialog from "@fe-plugin/components/lib/h5/confirm-dialog"; import withPopup from "@fe-plugin/components/lib/h5/with-popup"; import { getElementByKey } from "@fe-plugin/common/lib/component-element"; import * as ELEMENT_KEY from "constants/element-keys"; // 可弹出内置页渲染 function InlineRender(props) { // 获取main组件传入的参数 const { componentInfo, onClose, getElement } = props; const getElement = (type) => getElementByKey(componentInfo, type); return ( <Dialog dialog={getElement(ELEMENT_KEY.POPUP_DIALOG)} image={getElement(ELEMENT_KEY.IMAGE_B)} button={getElement(ELEMENT_KEY.BTN_B)} onClick={onClose} onClose={onClose} /> ); } export default withPopup(InlineRender);