使用React Hooks创建可拖拽组件的正确姿势

本教程旨在指导开发者如何在React应用中利用Hooks创建高性能、响应式的可拖拽组件。文章将深入探讨在实现拖拽功能时常见的“首次拖拽失效”问题，并提供一种基于React声明式编程范式的优化解决方案，避免不必要的原生DOM操作，确保组件行为的即时性和正确性。

理解React中的拖拽机制

在web开发中实现拖拽功能，通常依赖于html5的draggable属性和一系列拖拽事件，如ondragstart、ondragover、ondrop等。当结合react使用时，我们需要遵循react的声明式编程范式，让react来管理dom和事件绑定，而不是直接操作原生dom。

核心概念：

• draggable属性：任何HTML元素都可以通过设置draggable=”true”（或简写draggable）使其变为可拖拽。
• onDragStart事件：当用户开始拖拽元素时触发。通常在此事件中设置要传输的数据（event.dataTransfer.setData()）或记录被拖拽元素的ID。
• onDragOver事件：当被拖拽元素拖过一个可放置区域时持续触发。为了允许在该区域放置，必须调用event.preventDefault()来阻止浏览器的默认行为（默认不允许放置）。
• onDrop事件：当被拖拽元素被放置到一个可放置区域时触发。在此事件中，可以获取dataTransfer中的数据，并执行相应的逻辑（如重新排序、移动元素等）。

常见问题：首次拖拽失效的根源

在React应用中，有时会遇到可拖拽组件在第一次拖拽时无法正常工作，需要第二次拖拽才能生效的问题。这通常是由于混合使用了React的声明式渲染和命令式DOM操作导致的。

考虑以下不推荐的实现方式：

// 不推荐的实现方式示例
import React, { useEffect, useRef } from 'react';
const Container = ({ images, handleDrag, handleDrop }) => {
const ref = useRef(null); // 用于获取容器的DOM引用
useEffect(() => {
if (ref.current) {
// ⚠️ 问题所在：在useEffect中命令式地创建DOM元素并绑定事件
for (let i = 0; i < images.length; ++i) {
const draggable = document.createElement('div');
draggable.ondragstart = handleDrag; // 直接绑定原生事件
draggable.ondrop = handleDrop;     // 直接绑定原生事件
const style = 'position: absolute; width: 100px; height: 100px; border: 1px solid blue; background-color: #e0e0e0; cursor: grab;';
draggable.setAttribute('style', style);
draggable.setAttribute('draggable', true);
draggable.setAttribute('id', images[i].id);
ref.current.appendChild(draggable);
}
}
// 注意：这里的清理函数可能不完整，可能导致重复添加或内存泄漏
return () => {
// 实际应用中需要清理掉所有appendChild的元素
if (ref.current) {
ref.current.innerHTML = ''; // 简单粗暴的清理，但不推荐
}
};
}, [images, ref, handleDrag, handleDrop]); // 依赖项
return (
<div className={'relative'} style={{ border: '2px dashed gray', minHeight: '200px', position: 'relative' }}>
<div ref={ref} /> {/* 实际内容被添加到了这个div中 */}
</div>
);
};
export default Container;

问题分析：

1. 混合范式： useEffect是用于处理副作用的Hooks，例如数据获取、订阅或手动更改DOM。然而，在其中使用document.createElement来创建和管理组件的渲染内容，与React的声明式渲染理念相悖。
2. 状态同步延迟： 当handleDrag函数被调用时，它会通过setDragId(ev.currentTarget.id)更新dragId状态。由于这些div是在useEffect中创建的，它们的原生事件监听器可能不会立即“感知”到React状态的更新。第一次拖拽时，dragId被设置，但后续的handleDrop可能在一个尚未完全同步到最新dragId的状态下执行，或者React的重新渲染发生在第一次拖拽操作之后。因此，通常只有在状态更新并导致React重新渲染后，第二次拖拽才能正常工作。
3. 性能与维护： 手动操作DOM效率低下，且难以维护，容易引入bug，如重复添加元素、内存泄漏等。

解决方案：React声明式实现可拖拽组件

正确的做法是让React完全控制组件的渲染和事件绑定。通过在JSX中直接定义可拖拽元素，并使用map方法渲染列表，可以确保React的虚拟DOM机制高效地管理这些元素。

可灵AI

可灵AI：新一代AI创意生产力平台

10856

查看详情

核心代码示例：

首先，在父组件（例如App）中管理拖拽相关的状态和事件处理函数：

// App.js
import React, { useState } from 'react';
import Container from './Container'; // 假设Container组件在单独的文件中
// 辅助函数：根据拖拽ID对图片进行排序 (此为示例，具体实现根据业务逻辑而定)
const sortImages = (images, dragId, dropTargetId = null) => {
console.log(`正在排序：拖拽ID为 ${dragId}，目标ID为 ${dropTargetId}`);
// 实际的排序逻辑，例如：
// 1. 找到dragId对应的图片
// 2. 找到dropTargetId对应的图片（如果适用）
// 3. 重新排列selectedImages数组
const newImages = [...images];
const draggedItemIndex = newImages.findIndex(item => item.id === dragId);
if (draggedItemIndex === -1) return images;
const [draggedItem] = newImages.splice(draggedItemIndex, 1);
if (dropTargetId) {
const dropTargetIndex = newImages.findIndex(item => item.id === dropTargetId);
if (dropTargetIndex !== -1) {
newImages.splice(dropTargetIndex, 0, draggedItem);
} else {
newImages.push(draggedItem); // 如果找不到目标，放到最后
}
} else {
newImages.push(draggedItem); // 如果没有明确目标，也放到最后
}
return newImages;
};
const App = () => {
const initialImages = [
{ id: 'img1', src: 'image1.jpg', alt: 'Image 1' },
{ id: 'img2', src: 'image2.jpg', alt: 'Image 2' },
{ id: 'img3', src: 'image3.jpg', alt: 'Image 3' },
];
const [selectedImages, setSelectedImages] = useState(initialImages);
const [dragId, setDragId] = useState(null); // 用于存储当前被拖拽元素的ID
const handleDragStart = (ev) => {
// 设置拖拽数据，这里我们只关心ID
ev.dataTransfer.setData('text/plain', ev.currentTarget.id);
setDragId(ev.currentTarget.id);
console.log('拖拽开始:', ev.currentTarget.id);
};
const handleDrop = (ev) => {
ev.preventDefault(); // 阻止默认行为，允许放置
const droppedOnId = ev.currentTarget.id; // 获取放置目标的ID (如果是放置到另一个可拖拽元素上)
const data = ev.dataTransfer.getData('text/plain'); // 获取拖拽开始时设置的数据
console.log(`放置事件：拖拽ID为 ${data}，放置在 ${droppedOnId}`);
if (data && dragId) { // 确保有拖拽数据和已设置的dragId
const sortedImages = sortImages(selectedImages, data, droppedOnId);
setSelectedImages(sortedImages);
setDragId(null); // 拖拽完成后重置dragId
}
};
// 允许放置的区域需要监听 onDragOver 并阻止默认行为
const handleDragOver = (ev) => {
ev.preventDefault();
};
return (
<div style={{ padding: '20px' }}>
<h1>可拖拽图片容器</h1>
<Container
images={selectedImages}
handleDragStart={handleDragStart}
handleDrop={handleDrop}
handleDragOver={handleDragOver}
/>
</div>
);
};
export default App;

然后，Container组件直接通过JSX渲染可拖拽元素：

// Container.js
import React from 'react';
const Container = ({ images, handleDragStart, handleDrop, handleDragOver }) => {
return (
<div
style={{
border: '2px dashed gray',
minHeight: '200px',
position: 'relative', // 容器需要相对定位，以便子元素可以绝对定位
padding: '10px',
display: 'flex', // 使用flex布局来排列可拖拽项
flexWrap: 'wrap',
gap: '10px',
}}
onDragOver={handleDragOver} // 在容器上监听 onDragOver
onDrop={handleDrop}         // 在容器上监听 onDrop
>
{images.map((image) => (
<div
key={image.id} // 列表渲染时必须提供唯一的key
id={image.id}
draggable // 标记为可拖拽
onDragStart={handleDragStart} // 拖拽开始时触发
onDragOver={handleDragOver}   // 允许将其他元素放置到此元素上方
onDrop={handleDrop}           // 允许将其他元素放置到此元素上
style={{
width: '100px',
height: '