React-sortable-hoc 结合 hook 实现 Draggin 和 Droppin

molyzzx 发布于2019-08-26 10:56 / 3167人阅读

摘要：启动项目教程最终的目的是构建一个带有趣的应用程序来自，可以在视口周围拖动。创建组件，添加样式和数据为简单起见，我们将在文件中编写所有样式。可以看出，就是在当前的外层包裹我们所需要实现的功能。现在已经知道如何在项目中实现拖放

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

React 社区提供了许多的库来实现拖放的功能，例如 react-dnd, react-beautiful-dnd, react-drag-n-drop，等等。但是它们有一些共同的缺陷：

使用复杂，有时候需要做很多工作才能构建一个简单的拖放演示；

功能有限，例如无法实现多个拖放实例这样复杂的功能，如果有的话，它也会变得非常复杂。

为了解决这些问题，react-sortable-hoc 应运而生。

这篇教程需要你提前了解一些 React 组件以及 hooks 的基础知识。

React 官方推荐的封装高阶组件的方式是 HOC，我们需要借助它来实现一个具有拖放功能的高阶组件。

HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

启动项目

教程最终的目的是构建一个带有趣GIF的应用程序（来自Chris Gannon！），可以在视口周围拖动。具体见

首先，我们利用 create-react-app 来启动一个新的 React 项目：

npx create-react-app your-project-name

之后在项目中安装 react-sorting-hoc 以及 array-move，后者是用来实现数组移动。

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

创建 GIF 组件，添加样式和数据

为简单起见，我们将在 App.css 文件中编写所有样式。你可以使用以下内容对既有样式进行覆盖：

.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 来实现 GIF 组件

import React, { useState } from "react";

在src目录中创建一个 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/，可以看到如下结果

添加拖放功能

现在让我们对 Gif 组件添加拖拽功能。首先，我们需要了解 react-sortable-hoc 的两个 HOC，以及 array-move 的 arrayMove 方法，以便于在拖动发生修改数组。首先引入对应组件以及方法

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

之前提到过 HOC，本质上高阶组件是参数为组件，返回值为新组件的函数。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

可以看出，HOC 就是在当前 component 的外层包裹我们所需要实现的功能。所以 sortableContainer，sortableElement 就是 higherOrderComponent。

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

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

import 之后我们要做的是

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

SortableGif 为每个子元素创建了一个容器，也就是为单个 Gif 组件创建。它们将使用在 SortableGifsContainer 中，以 children 属性传递进去

注：您需要将每个子项在 div 或任何其他有效的 HTML 元素中。

然后用新创建的 SortableGif 替换原有的 Gif 组件，并在 SortableGifsContainer 中使用。


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

请务必注意，您需要将 index prop传递给可排序元素，以便库可以区分每一个子项目。它类似于在 React 中向列表添加键。

在 SortableGifsContainer 上，我们添加了 axis="x"，是因为 Gif 组件是水平放置的，如果想要水平拖动它们就需要配置 axis，而默认是垂直拖动。换句话说， axis="x" 限制子项目只能沿水平 x 轴拖放。同时，还添加了 onSortEnd={onSortEnd}，该函数在每次拖动或排序项目时触发。它的实现如下

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

onSortEnd 接收了一个被拖动的项目的新旧 index，当然，每次我们移动项目后，我们都会在arrayMove的帮助下修改数据。

现在已经知道如何在项目中实现拖放！

云服务器 GPU云服务器人工智能和结合云存储和cdn结合 vps和vpn如何结合 php和js的结合

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106859.html

JavaScript代码检查及与gulp、git的结合使用

摘要：在团队开发过程中，我们可能会要浪费一些时间在代码检查上，譬如拼写的检查代码规范的检查。安装及使用是一个用于代码静态检查的一些开源项目。如果没有指定文件，是不会对文件就行检查的。在团队开发过程中，我们可能会要浪费一些时间在代码检查上，譬如拼写的检查、代码规范的检查。作为码农，我们当然不能把自己的时间浪费这种无意义的事情上，所以本篇我将介绍一些自动化代码检查的东西和项目实际上的应用。 J...

yck 2019-08-21 14:03 评论0 收藏0
再谈Vue的生命周期----结合Vue源码

摘要：中的生命周期函数也可以称之为生命周期钩子函数，在特定的时期，调用特定的函数。吊起钩子函数调起钩子函数问题为什么是一个数组卸载组件，会触发一个这行代码之后发生了什么背后实现原理。简介关于Vue的生命周期函数，目前网上有许多介绍文章，但也都只是分析了表象。这篇文档，将结合Vue源码分析，为什么会有这样的表象。 Vue中的生命周期函数也可以称之为生命周期钩子（hook）函数，在特定的时期...

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

摘要：使用完成副作用操作，赋值给的函数会在组件渲染到屏幕之后。如此很容易产生，并且导致逻辑不一致。同时，这也是很多人将与状态管理库结合使用的原因之一。当我们通过的第二个数组类型参数，指明当前的依赖，就能避免不相关的执行开销了。前言本文内容大部分参考了 overreacted.io 博客一文，同时结合 React Hook 官方文章，整理并归纳一些笔记和输出个人的一些理解什么是 Hoo...

Lin_R 2019-08-26 13:50 评论0 收藏0
精读《Vue3.0 Function API》

摘要：拿到的都是而不是原始值，且这个值会动态变化。精读对于的与，笔者做一些对比。因此采取了作为优化方案只有当第二个依赖参数变化时才返回新引用。不需要使用等进行性能优化，所有性能优化都是自动的。前端精读帮你筛选靠谱的内容。 1. 引言 Vue 3.0 的发布引起了轩然大波，让我们解读下它的 function api RFC 详细了解一下 Vue 团队是怎么想的吧！首先官方回答了几个最受关注的...

voyagelab 2019-08-23 18:24 评论0 收藏0
React Hooks+Umi+TypeScript+Dva开发体验

摘要：为什么选择是开发和维护的一种面向对象的编程语言。一在组件组件复用状态逻辑很难没有提供将可复用性行为附加到组件的途径例如，把组件连接到。如此很容易产生，并且导致逻辑不一致。同时，这也是很多人将与状态管理库结合使用的原因之一。前端时间，接触了hooks，研究了一段时间后感觉使用起来十分方便，正好公司开了一个新的小项目，正好使用hooks来实践一下。技术选型 1.为什么选择umi 在之前...

stonezhu 2019-08-23 17:58 评论0 收藏0