...
概述：
渲染模块中会有对应的render方法将组件逻辑渲染出来，最终注册到编辑器、渲染引擎使用。但组件的构建需要依赖default-setting、用户信息等数据支持，所以在构建组件之前需要创建一个上下文，提供此类数据给组件使用。
1、DependencyContext 上下文
...
注意:
DependencyContext只能提供给template、setting模块相关组件使用(main模块为PReact构建，所以无法正常调用)。
template模块中，还需要对可编辑组件，和可编辑元素进行对应的上下文注入。
2、withDependencyContext 高阶组件
main模块使用withDependencyContext方法进行上下文关联
3、示例
1、上下文的注入可查看各个模块创建详细示例，
2、组件中上下文的获取可查看各个模块组件创建详细示例
2、组件
1、概述
- 组件分为俩种，编辑器编辑型组件，渲染引擎渲染型组件。
- 构建编辑器中可编辑基础元素由两部分构成，基础元素组件、可编辑方法，可编辑方法会提供编辑能力赋予基础组件，基础组件负责渲染。
2、组件介绍
...
编辑型组件分为两种，可编辑组件、可编辑元素。
1、图示
2、可编辑组件
- withEditableComponent 可编辑组件高阶组件，可生成可编辑组件
- 可编辑组件上下文注入（上下文注入点击查看）
3、可编辑元素
- withEditableElement 可编辑元素高阶组件
- 可编辑元素上下文注入（上下文注入点击查看）
- 可编辑元素根据不同的元素配置进行组件渲染，可编辑元素组件列表:
...
可编辑元素组件
...
基础元素组件
...
可编辑方法
...
EditableImage
...
Image
...
withEditableImage(key):void
...
EditableButton
...
Button
...
withEditableButton(key):void
...
EditableText
...
<p> 标签
...
withEditableText(key):void
...
EditableDialog
...
Dialog
...
withEditableDialog(key):void
...
构建一个拥有可编辑组件、可编辑按钮元素的template模块下编辑型组件。
| 代码块 | ||||
|---|---|---|---|---|
| ||||
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>
);
} |
...
渲染引擎渲染组件，有main模块引用，需要与编辑器可编辑组件对应渲染，并且需要附加逻辑。
...
@fe-plugin/components/lib/h5/cmps/button
...
Image
...
Text
...
Dialog
...
示例：
| 代码块 | ||||
|---|---|---|---|---|
| ||||
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} />;
} |
3、编辑器设置面板公用组件
4、内置页
| 锚 | ||||
|---|---|---|---|---|
|
template、main模块中存在的弹出层模块，称之为内置页，可做组件的弹出层逻辑渲染。
锚 12 12
1、template组件中的内置页
内置页在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; |
...
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模块组件渲染锚 10 10
| 10 | |
| 10 |
引入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; |
...