4、渲染

1、概述

了解组件的类型，与创建后，不同模块最终需要对组件进行组合，形成最终的渲染。

2、渲染介绍

1、template模块组件渲染

引入template模块上下文（查看 template 模块）

创建可编辑组件（查看 template模块下可编辑组件）

内置页的引用（查看 template 内置页创建）

示例:创建一个template组件

teplate组件

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组件

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;

1、main模块组件渲染

1、引入main模块上下文（查看 main 模块）

2、创建渲染组件（查看 main模块下渲染组件）

3、内置页的引用（查看 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;

3、内置页

template、main模块中存在的弹出层模块，称之为内置页，可做组件的弹出层逻辑渲染。

1、template组件中的内置页

内置页在template模块中创建使用可编辑型组件创建。

示例：termplate模块中内置页的创建

template模块内置页创建

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);

页面树结构