在React Hooks中实现可拖拽组件：避免常见陷阱与最佳实践

// 假设这是Container组件的简化版，展示了错误思路
const Container = ({ images, handleDrag, handleDrop }) => {
  const ref = useRef(null);

  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;     // 手动绑定事件
        draggable.setAttribute('draggable', true);
        draggable.setAttribute('id', images[i].id);
        // ... 其他样式设置
        ref.current.appendChild(draggable);
      }
    }
    // 注意：这里没有清理函数，可能导致内存泄漏和重复绑定
  }, [images, ref, handleDrag, handleDrop]);

  return (
    <div className={'relative'}>
      <div ref={ref} /> {/* 这里是容器 */}
    </div>
  );
};

import React, { useState, useRef } from 'react';

// 假设这是一个外部的排序函数
const sortImages = (images, dragId) => {
  // 实际的排序逻辑会根据dragId和drop目标ID来重新排列images数组
  // 示例中我们简化，假设它只是返回一个新数组
  console.log(`Sorting images with dragId: ${dragId}`);
  const newImages = [...images];
  // 实际逻辑会找到dragId对应的元素，并根据drop目标进行插入或移动
  return newImages;
};

// App组件：管理全局状态和拖放逻辑
const App = ({ initialImages }) => {
  const [selectedImages, setSelectedImages] = useState(initialImages);
  const [dragId, setDragId] = useState(null); // 存储当前被拖拽元素的ID

  // 处理拖拽开始事件
  const handleDragStart = (ev) => {
    setDragId(ev.currentTarget.id); // 设置被拖拽元素的ID
    // 可以设置dataTransfer，例如：ev.dataTransfer.setData('text/plain', ev.currentTarget.id);
  };

  // 处理拖放事件
  const handleDrop = (ev) => {
    ev.preventDefault(); // 阻止默认行为（如在浏览器中打开拖放的文件）
    const dropTargetId = ev.currentTarget.id; // 获取拖放目标元素的ID

    // 如果有dragId且拖放目标不是自身
    if (dragId && dragId !== dropTargetId) {
      const sortedImages = sortImages(selectedImages, dragId, dropTargetId); // 传入dropTargetId以进行实际排序
      setSelectedImages(sortedImages);
    }
    setDragId(null); // 重置dragId
  };

  // 必须阻止默认行为，否则onDrop不会触发
  const handleDragOver = (ev) => {
    ev.preventDefault();
  };

  return (
    <Container
      images={selectedImages}
      handleDragStart={handleDragStart}
      handleDrop={handleDrop}
      handleDragOver={handleDragOver}
    />
  );
};

// Container组件：渲染可拖拽元素
const Container = ({ images, handleDragStart, handleDrop, handleDragOver }) => {
  const containerRef = useRef(null); // 如果需要引用容器本身

  return (
    <div ref={containerRef} style={{ border: '2px dashed gray', minHeight: '200px', position: 'relative' }}>
      {images.map((image) => (
        <div
          key={image.id}          // 必须为列表项提供唯一的key
          id={image.id}           // 用于在事件中识别元素
          draggable               // 启用HTML5拖拽功能
          onDragStart={handleDragStart} // 拖拽开始时触发
          onDragOver={handleDragOver}   // 拖拽元素在目标上方移动时持续触发
          onDrop={handleDrop}           // 拖拽元素放置到目标上时触发
          style={{
            position: 'absolute',
            left: `${Math.random() * 100}px`, // 示例：随机位置
            top: `${Math.random() * 100}px`,
            width: '80px',
            height: '80px',
            backgroundColor: 'lightblue',
            border: '1px solid blue',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            cursor: 'grab',
            zIndex: image.id === dragId ? 100 : 1 // 示例：被拖拽元素层级更高
          }}
        >
          {image.id}
        </div>
      ))}
    </div>
  );
};

export default App;