read-dnd 嵌套使用
不做具体react-dnd的api讲解,如有需要请查看官网文档,描述很清晰。
需求背景
左侧是物料区,各个可以拖拽的小组件
右侧为编辑区,可以将组件拖进去组成页面
右侧编辑区内已拖拽的小组件可以在内部继续拖拽进行排序
技术栈
react、react-dom、mobx、mobx-react、react-dnd
实现逻辑
数据结构设计
属性
类型
说明
id
Number
组件id(根据规则自动生成)
type
String
组件类型
childrens
Array
组件下面包含的子组件
// 数据示例如下:
[
{
id: 1,
type: 'View',
childrens: [
{
id: 345,
type: 'Bu
1