React-Grid-Layout拖动时仅为当前网格项添加类的实现问题

你的问题核心是全局状态isActive会作用于所有网格项，导致拖动时所有组件都同步切换类名。要实现仅给当前拖动项加类的效果，需要跟踪具体被拖动项的ID，而非使用全局布尔值。

修复步骤： #

1. 替换全局状态为拖动项ID：把isActive改成存储当前被拖动的widget ID，初始值设为null。
2. 利用事件参数获取拖动项ID：React-Grid-Layout的onDrag和onDragStop事件会传递布局和项的详细信息，从中提取当前拖动项的ID。
3. 渲染时匹配ID添加类名：只有当widget的ID与当前拖动ID一致时，才添加tilt-grid类。

修改后的完整代码： #

import { useState } from 'react';
import ResponsiveReactGridLayout from 'react-grid-layout';
import Box from '@mui/material/Box';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';

const YourComponent = () => {
  // 存储当前被拖动的widget ID，初始为null
  const [draggedWidgetId, setDraggedWidgetId] = useState(null);

  const handleDrag = (layout, oldItem) => {
    // oldItem.i对应widget.id（即data-grid中设置的id）
    setDraggedWidgetId(oldItem.i);
  };

  const handleDrop = () => {
    // 拖动结束后清空选中状态
    setDraggedWidgetId(null);
  };

  return (
    <ResponsiveReactGridLayout
      layouts={layouts}
      className="layout"
      onLayoutChange={handleLayoutChange}
      draggableHandle=".drag-handle"
      onDrag={handleDrag}
      onDragStop={handleDrop}
    >
      {widgets.map(widget => (
        <Box key={widget.id} data-grid={widget.layout}>
          <DragIndicatorIcon className="drag-handle" />
          {/* 仅当前被拖动的widget才添加类 */}
          <widget.component 
            {...(widget.componentProps || {})} 
            className={widget.id === draggedWidgetId ? 'tilt-grid' : ''}
          />
        </Box>
      ))}
    </ResponsiveReactGridLayout>
  );
};

export default YourComponent;

关键细节说明： #

• React-Grid-Layout的onDrag回调参数中，oldItem的i属性对应你在data-grid中设置的id（即widget.id），确保两者值一致才能正确匹配。
• 如果你的widget.layout中用的是id字段而非i，可将代码中的oldItem.i改为oldItem.id，以实际数据结构为准。

内容的提问来源于stack exchange，提问作者Yohav Rn