在 React Hooks 中构建高性能可拖拽组件：避免首次拖拽无效的陷阱

// 假设这是 Container 组件的简化版本
const Container = ({ images, handleDrag, handleDrop }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      // 错误做法：直接创建 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; background: lightblue; cursor: grab;';
        draggable.setAttribute('style', style);
        draggable.setAttribute('draggable', true);
        draggable.setAttribute('id', images[i].id);

        ref.current.appendChild(draggable);
      }
    }
  }, [images, ref, handleDrag, handleDrop]); // 依赖项中包含了 handleDrag 和 handleDrop

  return (
    <div className={'relative'}>
      <div ref={ref} /> {/* 容器，用于挂载动态创建的 div */}
    </div>
  );
};

// App.js (父组件)
import React, { useState } from 'react';
import Container from './Container'; // 确保路径正确

const sortImages = (images, dragId) => {
  // 实际的排序逻辑，这里仅作示例
  const newImages = [...images];
  const draggedImageIndex = newImages.findIndex(img => img.id === dragId);
  if (draggedImageIndex > -1) {
    const [draggedItem] = newImages.splice(draggedImageIndex, 1);
    // 假设放置到列表末尾，实际逻辑会更复杂
    newImages.push(draggedItem);
  }
  return newImages;
};

const App = ({ initialImages }) => {
  const [selectedImages, setSelectedImages] = useState(initialImages || [
    { id: '1', src: 'img1.jpg', alt: 'Image 1' },
    { id: '2', src: 'img2.jpg', alt: 'Image 2' },
    { id: '3', src: 'img3.jpg', alt: 'Image 3' },
  ]);
  const [dragId, setDragId] = useState(null);

  const handleDrag = (ev) => {
    setDragId(ev.currentTarget.id);
    // 可以在这里设置拖拽数据
    ev.dataTransfer.setData("text/plain", ev.currentTarget.id);
  };

  const handleDrop = (ev) => {
    ev.preventDefault(); // 阻止默认行为，允许放置
    const droppedId = ev.dataTransfer.getData("text/plain"); // 获取拖拽数据
    console.log(`Dropped item with ID: ${droppedId} onto target.`);

    // 假设这里只是重新排序，实际可能需要目标区域的ID
    const sortedImages = sortImages(selectedImages, droppedId);
    setSelectedImages(sortedImages);
    setDragId(null); // 重置拖拽ID
  };

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

export default App;

// Container.js (子组件)
import React, { useRef } from 'react';

const Container = ({ images, handleDrag, handleDrop }) => {
  const containerRef = useRef(null);

  return (
    <div
      ref={containerRef}
      style={{
        width: '100%',
        minHeight: '200px',
        border: '2px dashed gray',
        padding: '10px',
        position: 'relative', // 确保子元素可以绝对定位
        display: 'flex', // 示例：使用 flex 布局来展示拖拽项
        flexWrap: 'wrap',
        gap: '10px',
      }}
      // 在容器上处理 onDragOver 和 onDrop，允许放置
      onDragOver={(ev) => ev.preventDefault()} // 必须阻止默认行为，才能触发 onDrop
      onDrop={handleDrop}
    >
      {images.map((image) => (
        <div
          key={image.id}
          id={image.id}
          draggable // 启用拖拽
          onDragStart={handleDrag} // 拖拽开始时触发
          // onDragOver 和 onDrop 可以在子元素上设置，也可以只在容器上设置，取决于具体需求
          // 如果子元素本身也是放置目标，则需要在这里也设置 onDragOver 和 onDrop
          // onDragOver={(ev) => ev.preventDefault()}
          // onDrop={handleDrop}
          style={{
            position: 'relative', // 如果要在拖拽时显示占位符，可设为 relative
            width: '100px',
            height: '100px',
            backgroundColor: 'lightblue',
            border: '1px solid blue',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'grab',
            // 其他样式...
          }}
        >
          {image.id}
          {/* <img src={image.src} alt={image.alt} style={{ maxWidth: '100%', maxHeight: '100%' }} /> */}
        </div>
      ))}
    </div>
  );
};

export default Container;