Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use dnd of react". In daily operation, I believe many people have doubts about how to use dnd of react. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use dnd of react". Next, please follow the editor to study!

React dnd is used to build a complex drag-and-drop interface and maintain the coupling between components. It is a group of high-level components of react. When you use it, you only need to wrap the target component with the corresponding API to achieve the function of dragging or accepting dragging elements. There is no need to judge the state of dragging, just do corresponding processing in each state attribute of the passed spec object.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What is the use of react dnd?

React-DnD is a set of React utilities that help you build complex drag-and-drop interfaces while maintaining coupling between components. It is ideal for applications such as Trello and Storify, where dragging transfers data between different parts of the application, and components can change their appearance and application state in response to drag-and-drop events.

Such as the team task cooperation platform pictured above, many companies are using it. React-DnD is an excellent open source solution for this type of business scenario.

Next, let's introduce how to use it.

Usage

Installation

We need to install backend and react-dnd at the same time.

Why is it designed in this way? it will be explained in detail when the source code is parsed later.

DndProvider injection

The DndProvider component provides React-DnD functionality for your application. It must be injected into the backend through the backendc parameter, but it can also be injected into the window object.

The backend backend is a very good design method in React-DnD. It can be understood as the implementation of specific drag and drop.

DndProvider api

Backend: required. The dnd backend can use the two official HTML5Backend or TouchBackend, or you can write the backend backend yourself.

Context: optional, the user configures the context of the backend, depending on the implementation of the backend.

Options: configure the backend object. You can input backend when customizing. There are examples later.

UseDrag declaration drag source

UserDrag is used as a hook to use the current component as the source of the drag.

The parameters returned by useDrag are

Arguments [0]: an object that contains properties collected from the collect function. If collect does not define a function, an empty object is returned.

Arguments [1]: the connector function of the drag source. This must be attached to the draggable part of the DOM.

Arguments [2]: connector function for drag preview. This can be attached to the preview section of the DOM.

Then the parameters passed in by useDrag are

Item: required. A normal JavaScript object that describes the data to drag. This is the only information about the drag source that can be used to place the target

Item.type: required and must be a string, ES6 symbol. Only registering as a placement target of the same type will react to this item

PreviewOptions: optional. A normal JavaScript object that describes the drag preview option

Options: optional, an ordinary object. If some of the props of the component are not scalar (that is, not original values or functions), arePropsEqual (props, otherProps) specifying custom functions inside the options object can improve performance. Unless you have a performance problem, don't worry.

Begin (monitor): optional, triggered when the drag operation starts. Nothing needs to be returned, but if an object is returned, it will override the default properties of the item specification.

End (item, monitor): optional, when the drag stops, end will be called.

CanDrag (monitor): optional. Use it to specify whether dragging is currently allowed. Allowed by default

IsDragging (monitor): optional. By default, only the drag source that initiates the drag operation is considered a drag

Collect: optional, collection function.

At this point, the study on "how to use the dnd of react" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.