react的dnd怎么用

這篇文章主要介紹“react的dnd怎么用”，在日常操作中，相信很多人在react的dnd怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”react的dnd怎么用”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

react dnd用于構(gòu)建復(fù)雜的拖放界面，并保持組件之間的耦合，是一組react高階組件；使用時(shí)只需用對(duì)應(yīng)的API將目標(biāo)組件包裹，即可實(shí)現(xiàn)拖動(dòng)或接受拖動(dòng)元素的功能；不需要判斷拖動(dòng)狀態(tài)，只需在傳入的spec對(duì)象中各個(gè)狀態(tài)屬性中做對(duì)應(yīng)處理即可。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react dnd的用法是什么

React-DnD是一組React實(shí)用程序，可幫助您構(gòu)建復(fù)雜的拖放界面，同時(shí)保持組件之間的耦合。它非常適合Trello和Storify之類的應(yīng)用程序，其中拖動(dòng)可在應(yīng)用程序的不同部分之間傳輸數(shù)據(jù)，并且組件可以響應(yīng)拖放事件更改其外觀和應(yīng)用程序狀態(tài)。

如上圖的團(tuán)隊(duì)任務(wù)合作平臺(tái)很多公司都在使用。React-DnD是這一類業(yè)務(wù)場景的優(yōu)秀開源解決方案。

接下來我們先介紹一下它的使用方法。

使用方法

安裝

安裝的時(shí)候我們需要同時(shí)安裝backend與react-dnd。

為什么與要這樣設(shè)計(jì)呢，后面源碼解析的時(shí)候會(huì)詳細(xì)說明。

DndProvider注入

DndProvider組件為您的應(yīng)用程序提供React-DnD功能。必須通過backendc參數(shù)將其注入后端，但是也可以將其注入window對(duì)象。

backend后端是React-DnD中非常好的一種設(shè)計(jì)方法?？梢岳斫鉃榫唧w拖拽的實(shí)現(xiàn)方式。

DndProvider api

• backend: 必填，dnd后端可以使用官方的提供的兩個(gè) HTML5Backend or TouchBackend，或者也可以自己寫backend后端。

• context: 選填，用戶配置后端的上下文，這取決于后端的實(shí)現(xiàn)。

• options: 配置后端對(duì)象，自定義時(shí)可以傳入backend。后面有例子。

useDrag 聲明拖動(dòng)源

userDrag用于將當(dāng)前組件用作拖動(dòng)源的鉤子。

其中useDrag返回的參數(shù)有

• arguments[0]: 一個(gè)對(duì)象，其中包含從collect函數(shù)收集的屬性。如果collect未定義函數(shù)，則返回一個(gè)空對(duì)象。

• arguments[1]: 拖動(dòng)源的連接器功能。這必須附加到DOM的可拖動(dòng)部分。

• arguments[2]: 用于拖動(dòng)預(yù)覽的連接器功能。這可以附加到DOM的預(yù)覽部分。

然后useDrag傳入的參數(shù)有

• item: 必填。一個(gè)普通的JavaScript對(duì)象，描述了要拖動(dòng)的數(shù)據(jù)。這是可用于放置目標(biāo)的有關(guān)拖動(dòng)源的唯一信息

• item.type: 必填，并且必須是字符串，ES6符號(hào)。只有注冊(cè)為相同類型的放置目標(biāo)才會(huì)對(duì)此項(xiàng)目做出反應(yīng)

• previewOptions: 選填。描述拖動(dòng)預(yù)覽選項(xiàng)的普通JavaScript對(duì)象

• options: 選填，一個(gè)普通的對(duì)象。如果組件的某些道具不是標(biāo)量的（即不是原始值或函數(shù)），則arePropsEqual(props, otherProps)在options對(duì)象內(nèi)部指定自定義函數(shù)可以提高性能。除非您有性能問題，否則不要擔(dān)心。

• begin(monitor)：選填，拖動(dòng)操作開始時(shí)觸發(fā)。不需要返回任何內(nèi)容，但是如果返回對(duì)象，它將覆蓋item規(guī)范的默認(rèn)屬性。

• end(item, monitor)：選填，拖動(dòng)停止的時(shí)候，end將會(huì)被調(diào)用。

• canDrag(monitor)：選填。使用它可以指定當(dāng)前是否允許拖動(dòng)。默認(rèn)允許

• isDragging(monitor)：選填。默認(rèn)情況下，只有啟動(dòng)拖動(dòng)操作的拖動(dòng)源才被視為拖動(dòng)

collect：選填，收集功能。

到此，關(guān)于“react的dnd怎么用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！