如何在移动端视图中禁用react-beautiful-dnd的拖拽功能？

你的实现思路没问题，但可以通过以下调整确保isDragDisabled生效，同时优化移动端交互体验：

1. 优化视图状态更新逻辑 #

给resize事件添加防抖，避免窗口缩放时频繁触发状态更新，同时确保初始状态在客户端正确计算：

import { useState, useEffect, useCallback } from 'react';

function ProductItem({
  objectId,
  name,
  availability,
  images = [],
  idx,
  category,
}) {
  const [isMobileView, setIsMobileView] = useState(false);

  // 防抖处理resize事件，避免频繁更新状态
  const handleResize = useCallback(() => {
    const isMobile = window.innerWidth < 768;
    setIsMobileView(isMobile);
  }, []);

  useEffect(() => {
    // 组件挂载时先执行一次，确保初始状态正确
    handleResize();
    
    // 封装防抖后的监听函数
    const debouncedResize = () => setTimeout(handleResize, 100);
    window.addEventListener('resize', debouncedResize);

    return () => {
      window.removeEventListener('resize', debouncedResize);
      clearTimeout(debouncedResize);
    };
  }, [handleResize]);

  // ...后续渲染逻辑
}

2. 配合isDragDisabled控制拖拽手柄属性 #

即使isDragDisabled设为true，dragHandleProps仍可能给元素添加拖拽相关的样式或事件。建议根据isMobileView条件决定是否传递该属性：

return (
  <Draggable
    draggableId={`${category}-${idx}`}
    index={idx}
    isDragDisabled={isMobileView}
  >
    {(provided) => {
      return (
        <div
          key={idx}
          className={`item ${isMobileView ? 'no-drag' : ''}`}
          ref={provided.innerRef}
          {...provided.draggableProps}
          // 移动端不传递拖拽手柄属性，彻底禁用拖拽交互
          {...(!isMobileView && provided.dragHandleProps)}
        >
          <img src={images[0]} alt="restaurant" />
          <div>
            <h3 className="title">{name}</h3>
          </div>
          <ProductAvailability id={objectId} availability={availability} />
          {provided.placeholder}
        </div>
      );
    }}
  </Draggable>
);

3. 添加CSS强化移动端禁用反馈 #

给移动端的item添加样式，明确提示不可拖拽：

.no-drag {
  cursor: default;
  user-select: none;
}
.no-drag:active {
  transform: none; /* 移除拖拽时的点击反馈 */
}

原代码失效的可能原因 #

• 窗口resize时状态更新过于频繁，导致react-beautiful-dnd内部状态未及时同步
• 即使isDragDisabled生效，dragHandleProps仍保留交互样式，造成可拖拽的错觉
• 初始状态计算可能在组件挂载前完成，导致移动端判断不准确

内容的提问来源于stack exchange，提问作者tanjim anim