...
1、概述
...
了解组件的类型，与创建后，不同模块最终需要对组件进行组合，形成最终的渲染。
...
2、渲染介绍
...
1、template模块组件渲染
...
| 锚 |
|---|
...
|
...
|
引入template模块上下文（查看 template 模块）
创建可编辑组件（查看 template模块下可编辑组件）
内置页的引用（查看 template 内置页创建）
示例:创建一个template组件
...
1、template组件中的内置页
内置页在template模块中创建使用可编辑型组件创建。
示例：termplate模块中内置页的创建
| 代码块 | ||||
|---|---|---|---|---|
| ||||
import React from "react";
import {
withEditableButton,
withEditableDialog,
DependencyContext } from "@fe-plugin/components/lib/templates/editable-elementcontext";
import { getComponentInfo } from "@fe-plugin/common/lib/component-info";
import { getElementByKeywithEditableComponent } from "@fe-plugin/commoncomponents/lib/templates/editable-component-element";
import BaseDialog{ withEditableButton } from "@fe-plugin/components/lib/templates/cmps/dialogeditable-element";
import BaseButton from "@fe-plugin/components/lib/templates/cmps/button";
import * as ELEMENT_KEY from "constants/element-keys";
// 创建一个可编辑组件
const EditableComponent = withEditableComponent();
// 编辑器舞台编辑组件
class InlinePageTemplate extends React.Component {
//获取上下文
static contextType = DependencyContext;
render() {
const { config } = this.context;
// 获取信息，并创建获取element的方法渲染组件
const componentInfo = getComponentInfo(config);
const getElement = (type) => getElementByKey(componentInfo.elements, type);
renderCmp() {
// 获取弹窗元素
const dialogElement = getElement(ELEMENT_KEY.POPUP_DIALOG);
// 根据元素配置的key值创建一个可编辑元素
const EditableButton = withEditableDialogwithEditableButton(ELEMENT_KEY.Button)((element) => {
return <BaseButton data={element} style={element.style} />;
});
const EditableDialog = withEditableButton(ELEMENT_KEY.Dialog)((element) => {return (
return (<EditableComponent>
<BaseDialog data={element}><div>
<EditableButton />
</BaseDialog>div>
);
});
return (
<Dialog name={ELEMENT_KEY.POPUP_DIALOG}>
<EditableDialog />
</Dialog></EditableComponent>
);
}
}
export default InlinePageTemplate; |
3、setting模块组件渲染锚 11
| 11 |
...
11
| 11 |
...
渲染setting模块需要以下步骤:
1、在default-setting中将 hasComponentSetting 设置为 true
2、在模块入口传入onChange、initValue参数，提供数据初始化，数据更改等功能(点击查看模块入口)
示例:创建一个setting组件
2、main组件中的内置页
内置页在main模块中的创建使用渲染型组件创建。
示例：main模块中内置页的创建
| 代码块 | ||||
|---|---|---|---|---|
| ||||
import React from "react"; import { DependencyContext Dialog} from "@fe-plugin/components/lib/h5/confirm-dialogcontext"; import { getComponentInfo } from "@fe-plugin/common/lib/component-info"; import { withEditableComponent withPopup} from "@fe-plugin/components/lib/h5templates/witheditable-popupcomponent"; import { getElementByKeywithEditableButton } from "@fe-plugin/commoncomponents/lib/componenttemplates/editable-element"; import BaseButton from "@fe-plugin/components/lib/templates/cmps/button"; import * as ELEMENT_KEY from "constants/element-keys"; // 可弹出内置页渲染 function InlineRender(props) { 创建一个可编辑组件 const EditableComponent = withEditableComponent(); // 获取main组件传入的参数编辑器舞台编辑组件 class Template extends constReact.Component { componentInfo, onClose, getElement } //获取上下文 static contextType = propsDependencyContext; const// getElement渲染组件 = renderCmp(type) => getElementByKey(componentInfo, type); return ( { // <Dialog根据元素配置的key值创建一个可编辑元素 const EditableButton dialog={getElement withEditableButton(ELEMENT_KEY.POPUP_DIALOG)} Button)((element) => { return image={getElement(ELEMENT_KEY.IMAGE_B)} <BaseButton data={element} style={element.style} />; }); return button={getElement(ELEMENT_KEY.BTN_B)} onClick={onClose}<EditableComponent> onClose={onClose} <div> <EditableButton /> </div> </EditableComponent> ); } } export default withPopup(InlineRender)Template; |
3、渲染
了解组件的类型，与创建后，不同模块最终需要对组件进行组合，形成最终的渲染。
1、main模块组件渲染
| 锚 | ||||
|---|---|---|---|---|
|
引入main模块上下文（点击查看main模块的创建1、引入main模块上下文（查看 main 模块）
创建渲染组件（点击查看渲染型组件创建2、创建渲染组件（查看 main模块下渲染组件）
内置页的引用（点击查看main模块下内置页创建3、内置页的引用（查看 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; |
...
3、内置页
| 锚 |
|---|
...
|
template、main模块中存在的弹出层模块，称之为内置页，可做组件的弹出层逻辑渲染。
锚 12 12
1、template组件中的内置页
内置页在template模块中创建使用可编辑型组件创建。
示例：termplate模块中内置页的创建
...
引入template模块上下文（点击查看template模块的创建 ）
创建可编辑组件（点击查看编辑型组件创建）
内置页的引用（点击查看template模块下内置页创建）
示例:创建一个template组件
| 代码块 | ||||
|---|---|---|---|---|
| ||||
import React from "react";
import {
withEditableButton,
DependencyContext withEditableDialog,
} from "@fe-plugin/components/lib/contexttemplates/editable-element";
import { getComponentInfo } from "@fe-plugin/common/lib/component-info";
import { withEditableComponentgetElementByKey } from "@fe-plugin/componentscommon/lib/templates/editablecomponent-componentelement";
import { withEditableButtonBaseDialog } from "@fe-plugin/components/lib/templates/editable-elementcmps/dialog";
import BaseButton from "@fe-plugin/components/lib/templates/cmps/button";
import * as ELEMENT_KEY from "constants/element-keys";
// 创建一个可编辑组件
const EditableComponent = withEditableComponent();
// 编辑器舞台编辑组件
class TemplateInlinePage extends React.Component {
//获取上下文
static contextType = DependencyContext;
render() {
const { config } = this.context;
// 渲染组件
renderCmp() { 获取信息，并创建获取element的方法
const componentInfo = getComponentInfo(config);
const getElement = (type) => getElementByKey(componentInfo.elements, type);
// 获取弹窗元素
const dialogElement = getElement(ELEMENT_KEY.POPUP_DIALOG);
// 根据元素配置的key值创建一个可编辑元素
const EditableButton = withEditableButtonwithEditableDialog(ELEMENT_KEY.Button)((element) => {
return <BaseButton data={element} style={element.style} />;
});
const EditableDialog return= withEditableButton(ELEMENT_KEY.Dialog)((element) => {
<EditableComponent>return (
<div><BaseDialog data={element}>
<EditableButton />
</div>BaseDialog>
);
});
return (
<Dialog name={ELEMENT_KEY.POPUP_DIALOG}>
<EditableDialog />
</EditableComponent>Dialog>
);
}
}
export default TemplateInlinePage; |
...
锚
...
13
...
13
渲染setting模块需要以下步骤:
1、在default-setting中将 hasComponentSetting 设置为 true
2、在模块入口传入onChange、initValue参数，提供数据初始化，数据更改等功能(点击查看模块入口)
2、main组件中的内置页
内置页在main模块中的创建使用渲染型组件创建。
示例：main模块中内置页的创建示例:创建一个setting组件
| 代码块 | ||||
|---|---|---|---|---|
| ||||
import React from "react"; import {Dialog DependencyContext } from "@fe-plugin/components/lib/context"; import { getComponentInfo } from "@fe-plugin/common/lib/component-infoh5/confirm-dialog"; import {withPopup withEditableComponent } from "@fe-plugin/components/lib/templatesh5/editablewith-componentpopup"; import { withEditableButtongetElementByKey } from "@fe-plugin/componentscommon/lib/templates/editablecomponent-element"; import BaseButton from "@fe-plugin/components/lib/templates/cmps/button"; import * as ELEMENT_KEY from "constants/element-keys"; // 创建一个可编辑组件可弹出内置页渲染 const EditableComponent = withEditableComponent(); function InlineRender(props) { // 编辑器舞台编辑组件获取main组件传入的参数 class Template extends React.Componentconst { //获取上下文 static contextType = DependencyContext; componentInfo, onClose, getElement } = props; //const 渲染组件 getElement = renderCmp(type) { => getElementByKey(componentInfo, type); return ( // 根据元素配置的key值创建一个可编辑元素<Dialog const EditableButton dialog= withEditableButton{getElement(ELEMENT_KEY.Button)((element) => {POPUP_DIALOG)} return <BaseButton data={element} style={element.style} />; }); return (image={getElement(ELEMENT_KEY.IMAGE_B)} button={getElement(ELEMENT_KEY.BTN_B)} <EditableComponent>onClick={onClose} <div> onClose={onClose} <EditableButton /> </div> </EditableComponent> ); } } export default TemplatewithPopup(InlineRender); |