React-sortable-hoc 結(jié)合 hook 實現(xiàn) Draggin 和 Droppin

molyzzx 發(fā)布于2019-08-26 10:56 / 3270人閱讀

摘要：啟動項目教程最終的目的是構(gòu)建一個帶有趣的應用程序來自，可以在視口周圍拖動。創(chuàng)建組件，添加樣式和數(shù)據(jù)為簡單起見，我們將在文件中編寫所有樣式。可以看出，就是在當前的外層包裹我們所需要實現(xiàn)的功能。現(xiàn)在已經(jīng)知道如何在項目中實現(xiàn)拖放

翻譯：https://css-tricks.com/draggi...

React 社區(qū)提供了許多的庫來實現(xiàn)拖放的功能，例如 react-dnd, react-beautiful-dnd, react-drag-n-drop，等等。但是它們有一些共同的缺陷：

使用復雜，有時候需要做很多工作才能構(gòu)建一個簡單的拖放演示；

功能有限，例如無法實現(xiàn)多個拖放實例這樣復雜的功能，如果有的話，它也會變得非常復雜。

為了解決這些問題，react-sortable-hoc 應運而生。

這篇教程需要你提前了解一些 React 組件以及 hooks 的基礎知識。

React 官方推薦的封裝高階組件的方式是 HOC，我們需要借助它來實現(xiàn)一個具有拖放功能的高階組件。

HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設計模式。

啟動項目

教程最終的目的是構(gòu)建一個帶有趣GIF的應用程序（來自Chris Gannon！），可以在視口周圍拖動。具體見

首先，我們利用 create-react-app 來啟動一個新的 React 項目：

npx create-react-app your-project-name

之后在項目中安裝 react-sorting-hoc 以及 array-move，后者是用來實現(xiàn)數(shù)組移動。

cd your-project-name
yarn add react-sortable-hoc array-move

創(chuàng)建 GIF 組件，添加樣式和數(shù)據(jù)

為簡單起見，我們將在 App.css 文件中編寫所有樣式。你可以使用以下內(nèi)容對既有樣式進行覆蓋：

.App {
  background: #1a1919;
  color: #fff;
  min-height: 100vh;
  padding: 25px;
  text-align: center;
}

.App h1 {
  font-size: 52px;
  margin: 0;
}

.App h2 {
  color: #f6c945;
  text-transform: uppercase;
}

.App img {
  cursor: grab;
  height: 180px;
  width: 240px;
}

接下來，讓我們使用 React 的 useState hook 來實現(xiàn) GIF 組件

import React, { useState } from "react";

在src目錄中創(chuàng)建一個 Gif.js 文件并寫入以下代碼：

import React from "react";
import PropTypes from "prop-types";

const Gif = ({ gif }) => ()

Gif.propTypes = {
  gif: PropTypes.string.isRequired,
};

export default Gif;

編寫代碼時盡力遵循最佳實踐，因此我們還導入 PropTypes 進行類型檢查。之后將Gif 組件并將其添加到 App 中

import React, { useState } from "react";
import "./App.css";

import Gif from "./Gif";

const App = () => {
  const [gifs, setGifs] = useState(["https://media.giphy.com/media/3ohhwoWSCtJzznXbuo/giphy.gif","https://media.giphy.com/media/l46CbZ7KWEhN1oci4/giphy.gif","https://media.giphy.com/media/3ohzgD1wRxpvpkDCSI/giphy.gif","https://media.giphy.com/media/xT1XGYy9NPhWRPp4pq/giphy.gif",]);


  return (
    
      Drag those GIFs around
      Set 1
        {gifs.map((gif,  i) => )}
    
  );
}

export default App;

運行 npm run start，訪問 http://localhost:3000/，可以看到如下結(jié)果

添加拖放功能

現(xiàn)在讓我們對 Gif 組件添加拖拽功能。首先，我們需要了解 react-sortable-hoc 的兩個 HOC，以及 array-move 的 arrayMove 方法，以便于在拖動發(fā)生修改數(shù)組。首先引入對應組件以及方法

import { sortableContainer, sortableElement } from "react-sortable-hoc";
import arrayMove from "array-move";

之前提到過 HOC，本質(zhì)上高階組件是參數(shù)為組件，返回值為新組件的函數(shù)。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

可以看出，HOC 就是在當前 component 的外層包裹我們所需要實現(xiàn)的功能。所以 sortableContainer，sortableElement 就是 higherOrderComponent。

sortableContainer 是所有可排序元素的容器；

sortableElement 是每個可渲染元素的容器。

import 之后我們要做的是

const SortableGifsContainer = sortableContainer(({ children }) => {children});
    
const SortableGif = sortableElement(({ gif }) => );

SortableGif 為每個子元素創(chuàng)建了一個容器，也就是為單個 Gif 組件創(chuàng)建。它們將使用在 SortableGifsContainer 中，以 children 屬性傳遞進去

注：您需要將每個子項在 div 或任何其他有效的 HTML 元素中。

然后用新創(chuàng)建的 SortableGif 替換原有的 Gif 組件，并在 SortableGifsContainer 中使用。


  {gifs.map((gif, i) =>
    
  )}

請務必注意，您需要將 index prop傳遞給可排序元素，以便庫可以區(qū)分每一個子項目。它類似于在 React 中向列表添加鍵。

在 SortableGifsContainer 上，我們添加了 axis="x"，是因為 Gif 組件是水平放置的，如果想要水平拖動它們就需要配置 axis，而默認是垂直拖動。換句話說， axis="x" 限制子項目只能沿水平 x 軸拖放。同時，還添加了 onSortEnd={onSortEnd}，該函數(shù)在每次拖動或排序項目時觸發(fā)。它的實現(xiàn)如下

const onSortEnd = ({ oldIndex, newIndex }) => setGifs(arrayMove(gifs, oldIndex, newIndex));

onSortEnd 接收了一個被拖動的項目的新舊 index，當然，每次我們移動項目后，我們都會在arrayMove的幫助下修改數(shù)據(jù)。

現(xiàn)在已經(jīng)知道如何在項目中實現(xiàn)拖放！

云服務器 GPU云服務器人工智能和結(jié)合云存儲和cdn結(jié)合 vps和vpn如何結(jié)合 php和js的結(jié)合

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106859.html

JavaScript代碼檢查及與gulp、git的結(jié)合使用

摘要：在團隊開發(fā)過程中，我們可能會要浪費一些時間在代碼檢查上，譬如拼寫的檢查代碼規(guī)范的檢查。安裝及使用是一個用于代碼靜態(tài)檢查的一些開源項目。如果沒有指定文件，是不會對文件就行檢查的。在團隊開發(fā)過程中，我們可能會要浪費一些時間在代碼檢查上，譬如拼寫的檢查、代碼規(guī)范的檢查。作為碼農(nóng)，我們當然不能把自己的時間浪費這種無意義的事情上，所以本篇我將介紹一些自動化代碼檢查的東西和項目實際上的應用。 J...

yck 2019-08-21 14:03 評論0 收藏0
再談Vue的生命周期----結(jié)合Vue源碼

摘要：中的生命周期函數(shù)也可以稱之為生命周期鉤子函數(shù)，在特定的時期，調(diào)用特定的函數(shù)。吊起鉤子函數(shù)調(diào)起鉤子函數(shù)問題為什么是一個數(shù)組卸載組件，會觸發(fā)一個這行代碼之后發(fā)生了什么背后實現(xiàn)原理。簡介關于Vue的生命周期函數(shù)，目前網(wǎng)上有許多介紹文章，但也都只是分析了表象。這篇文檔，將結(jié)合Vue源碼分析，為什么會有這樣的表象。 Vue中的生命周期函數(shù)也可以稱之為生命周期鉤子（hook）函數(shù)，在特定的時期...

KavenFan 2019-08-23 12:16 評論0 收藏0
React Hook 不完全指南

摘要：使用完成副作用操作，賦值給的函數(shù)會在組件渲染到屏幕之后。如此很容易產(chǎn)生，并且導致邏輯不一致。同時，這也是很多人將與狀態(tài)管理庫結(jié)合使用的原因之一。當我們通過的第二個數(shù)組類型參數(shù)，指明當前的依賴，就能避免不相關的執(zhí)行開銷了。前言本文內(nèi)容大部分參考了 overreacted.io 博客一文，同時結(jié)合 React Hook 官方文章，整理并歸納一些筆記和輸出個人的一些理解什么是 Hoo...

Lin_R 2019-08-26 13:50 評論0 收藏0
精讀《Vue3.0 Function API》

摘要：拿到的都是而不是原始值，且這個值會動態(tài)變化。精讀對于的與，筆者做一些對比。因此采取了作為優(yōu)化方案只有當?shù)诙€依賴參數(shù)變化時才返回新引用。不需要使用等進行性能優(yōu)化，所有性能優(yōu)化都是自動的。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言 Vue 3.0 的發(fā)布引起了軒然大波，讓我們解讀下它的 function api RFC 詳細了解一下 Vue 團隊是怎么想的吧！首先官方回答了幾個最受關注的...

voyagelab 2019-08-23 18:24 評論0 收藏0
React Hooks+Umi+TypeScript+Dva開發(fā)體驗

摘要：為什么選擇是開發(fā)和維護的一種面向?qū)ο蟮木幊陶Z言。一在組件組件復用狀態(tài)邏輯很難沒有提供將可復用性行為附加到組件的途徑例如，把組件連接到。如此很容易產(chǎn)生，并且導致邏輯不一致。同時，這也是很多人將與狀態(tài)管理庫結(jié)合使用的原因之一。前端時間，接觸了hooks，研究了一段時間后感覺使用起來十分方便，正好公司開了一個新的小項目，正好使用hooks來實踐一下。技術選型 1.為什么選擇umi 在之前...

stonezhu 2019-08-23 17:58 評論0 收藏0