React最简版本低代码实现

大家好，我是阿星，不知道你有没有开发拖拽功能的需求，或者对拖拽元素感兴趣。那么这篇文章应该你可以读一下。接下来我会使用 react-dnd、 react-moveable 来实现下面这个 拖拽demo，先给大家看一下我的效果： 这里是源码：https://github.com/coderPerseus/drag-drop，如果对你有帮助，可以 star 一下，感谢！

需求分析

先找一个很赞的低代码平台，这里我找的是：阿里的低代码引擎：https://lowcode-engine.cn/demo/demo-general/index.html，大家可以先看下，了解一下低代码平台。 那我们来完成一个最简版本的demo吧！通过上面的gif 大家应该看到了页面分为三个部分，准确来说分为如下四个部分：

1. 导航栏：放一些全局的配置，操作等等
2. 左侧物料区：左侧会放一些物料，用来拖拽到中间，有的还会有页面树结构，JSON 数据，我们这里就实现一个 物料展示和拖拽
3. 中间展示，拖拽区：负责把左侧的物料可以拖进来，可以在这里进行物料的拖拽，可以点击唤起右侧对应的属性编辑区
4. 右边属性配置区：选中拖拽元素，进行编辑

好了，我们需求梳理完成，我们一步步开发吧！

搭建项目

我们基于 Next.js 创建一个项目吧！参考文档：https://nextjs.org/docs/getting-started/installation，执行 npx create-next-app@latest， 我们等待安装完成，启动项目npm run dev，node版本要 >= 18.17 哦！ 我们删除 app/page.tsx 不需要内容后，我们就创建我们需要的组件文件 app 放页面的目录，里面有我们的主页面 componet：组件目录

> ContextProvider：基于useContext 封装的数据共享组件，这样就实现了数据在多个组件同步的能力，中间移动元素的位置，右侧也相应变化

> material：存放我们左侧所有物料的地方，这里有图片物料和文本物料（通过一个映射map 来动态渲染对应的元素），这里就是完成左侧所有类型物料的渲染逻辑的地方

> DraggableComponent：左侧组件面板，展示可供拖拽和使用的组件库。通过渲染预设的素材数组，然后使用下文中的 DragWrapper 来包裹每一个 组件，使其可以拖拽

> ComponentPanel 设计面板：用于放置和编辑组件的地方。渲染用户从左侧拖拽的元素数组，使用 MoveableWrapper 来实现页面元素可以拖拽

> PropertyEditor：右侧属性编辑器，用于编辑物料的属性，通过配置得到要渲染的配置表单，然后渲染出对应的配置表单

> DragWrapper：封装了一个 可拖拽组件的包装组件，使用 react-dnd

> MoveableWrapper：封装了一个可以移动的包装组件，使用 react-moveable 实现

> lib 下面 component 存放物料的数据，utils 存放一些公共方法

是不是很简答，这是最简的低代码生成器，通过拖拽得到对应的 JSON 数据，但真正的低代码生成器要比这个复杂的多

难点 & 坑点

这个项目真正难的数据结构，需要设计一个好的数据结构来兼容无论什么元素都额可以使用这个数据结构来承载。 这个项目的坑点是当我刷新页面把一个元素拖拽到设计区，然后这个元素无法被选中，最后发现是需要动态更新 moveable 的target 属性，我就设置了一个 target 的 useState，然后，当前选中的元素和JSON数据变化的时候我就更新这个 target 修复了这个bug，但是排查了很久才发现是它的问题

end

感谢你的阅读！