编辑器核心的一环就是组件拖拽, 这里笔者使用了社区比较强大且稳定的库react-dnd, 其拖拽分为两个部分, 一个是从组件区拖拽到画布区, 另一个是画布区内部组件的自由拖拽....我们可以用原生H5的拖放API来实现第一部分的功能, 本质是将拖动源携带的数据传到画布制定区域, 目标源监听事件拿到携带的数据动态渲染出实际的组件. 过程如下:
?...image.png
当然深入研究过react-dnd的朋友都知道, 以上两个功能通过react-dnd都可以实现, 大家可以参考它的官网react-dnd官网学习研究具体实现流程, 也可以直接参考PC-Dooring...image.png
核心就是通过编辑器产生的有效词法数据, 让渲染器能解析渲染成可用的HTML页面....定义
组件代码就是组件内部具体的实现, 如下案例:
import React, { memo } from 'react';
import { ITextConfig } from '.
云服务器
ICP备案
实时音视频
对象存储
云直播
