react dnd的用法是什麼

react dnd用於建立複雜的拖放介面，並保持元件之間的耦合，是一組react高階元件；使用時只需用對應的API將目標元件包裹，即可實現拖動或接受拖曳元素的功能；不需要判斷拖曳狀態，只要在傳入的spec物件中各個狀態屬性中做對應處理即可。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react dnd的用法是什麼

React-DnD是一組React實用程序，可幫助您建立複雜的拖放介面，同時保持元件之間的耦合。它非常適合Trello和Storify之類的應用程序，其中拖曳可在應用程式的不同部分之間傳輸數據，並且元件可以響應拖放事件更改其外觀和應用程式狀態。

如上圖的團隊任務合作平台很多公司都在使用。 React-DnD是這一類業務場景的優秀開源解決方案。

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

使用方法

安裝

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

為什麼與要這樣設計呢，後面原始碼解析的時候會詳細說明。

DndProvider注入

DndProvider元件為您的應用程式提供React-DnD功能。必須透過backendc參數將其註入後端，但是也可以將其註入window物件。

backend後端是React-DnD中非常好的一種設計方法。可以理解為具體拖曳的實現方式。

DndProvider api

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

• context: 選填，使用者配置後端的上下文，這取決於後端的實作。

• options: 設定後端對象，自訂時可以傳入backend。後面有例子。

useDrag 宣告拖曳來源

userDrag用於將目前元件用作拖曳來源的鉤子。

其中useDrag傳回的參數有

• #arguments[0]: 一個對象，其中包含從collect函數收集的屬性。如果collect未定義函數，則傳回一個空物件。

• arguments[1]: 拖曳來源的連接器功能。這必須附加到DOM的可拖曳部分。

• arguments[2]: 用來拖曳預覽的連接器功能。這可以附加到DOM的預覽部分。

然後useDrag傳入的參數有

• item: 必填。一個普通的JavaScript對象，描述了要拖曳的資料。這是可用於放置目標的有關拖曳來源的唯一資訊

• item.type: 必填，且必須是字串，ES6符號。只有註冊為相同類型的放置目標才會對此項目做出反應

• previewOptions: 選填。描述拖曳預覽選項的普通JavaScript物件

• options: 選填，一個普通的物件。如果元件的某些道具不是標量的（即不是原始值或函數），則arePropsEqual(props, otherProps)在options物件內部指定自訂函數可以提高效能。除非您有效能問題，否則不要擔心。

• begin(monitor)：選填，拖曳操作開始時觸發。不需要傳回任何內容，但是如果傳回對象，它將覆寫item規範的預設屬性。

• end(item, monitor)：選填，拖曳停止的時候，end將會被呼叫。

• canDrag(monitor)：選填。使用它可以指定當前是否允許拖曳。預設允許

• isDragging(monitor)：選填。預設情況下，只有啟動拖曳操作的拖曳來源才會被視為拖曳

collect：選填，收集功能。

推薦學習：《react影片教學》

以上是react dnd的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！