javascript

#javascript| 来源: 网络整理| 查看: 265

翻译：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) =>

【本文地址】

公司简介

联系我们