Read-dnd used nested

There is no specific react-DND API explanation. Please check the official website documentation if necessary. The description is very clear. The react – DND – website

This article demo shows the address

react-dnd-nested

Demand background

  • On the left side is the material area, where each component can be dragged
  • On the right is an editing area where components can be dragged to form a page
  • Widgets that have been dragged in the right edit area can be dragged internally for sorting

Technology stack

React, react-dom, mobx, mobx-react, react- DND

Implementation logic

Data structure design

attribute type instructions
id Number Component ID (automatically generated according to the rule)
type String Component type
childrens Array The subcomponents contained under the component 
// The following is an example of data:[{id: 1.type: 'View'.childrens: [{id: 345.type: 'Button'},... ] }]Copy the code

Apply the main entry code

The left-hand component is wrapped with SourceBox

Basic use, do not make clear instructions, need to view the official website article, the code is as follows:

Methods for adding components

Here we need a utility method called findItem that recursively finds the current data

Editor area implementation

Since the data is nested in a loop, we implement it in two components, a list and an item, and a file containing an entry.

index.js

The list component contains where we loop through the current data, setting each item

The Item component is the core component, which needs to be used as both the target receiving component and the source to support drag and drop sorting

Move:

Projects using

yarn install
yarn start
Copy the code

Open your browser and visit http://localhost:3000/

If it helps you, welcome to star✨ react-DNd-nested-nested