【文件属性】：
文件名称：react-dnd-nested:react-dnd 嵌套使用详解
文件大小：2.92MB
文件格式：ZIP
更新时间：2021-05-29 09:38:47
react drag-and-drop react-dnd JavaScript
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
【文件预览】：
react-dnd-nested-master
----config()
--------modules.js(4KB)
--------getHttpsConfig.js(2KB)
--------webpackDevServer.config.js(7KB)
--------webpack.config.js(29KB)
--------jest()
--------pnpTs.js(620B)
--------env.js(4KB)
--------paths.js(2KB)
----images()
--------app.png(165KB)
--------list.png(168KB)
--------right.png(168KB)
--------move.png(292KB)
--------findItem.png(154KB)
--------item.png(963KB)
--------add.png(151KB)
--------left.png(336KB)
----docs()
--------service-worker.js(1KB)
--------asset-manifest.json(1KB)
--------precache-manifest.a7f4803806891745bfd96bfb22a4ae44.js(759B)
--------index.html(2KB)
--------static()
--------favicon.ico(4KB)
----package.json(4KB)
----src()
--------index.js(240B)
--------assets()
--------left()
--------right()
--------App.js(3KB)
--------style.css(575B)
----.gitignore(321B)
----public()
--------index.html(240B)
--------favicon.ico(4KB)
----README.md(3KB)
----scripts()
--------test.js(1KB)
--------build.js(7KB)
--------start.js(5KB)