Pragmatic Drag and Drop 中 ref 传递问题的解决方案

在 React 项目中实现拖拽功能时，我们经常会遇到需要将 ref 传递给子组件的情况。本文将以 Pragmatic Drag and Drop 项目为例，深入分析 ref 传递的常见问题及其解决方案。

问题背景

开发者在实现拖拽功能时，尝试通过两种方式将 ref 传递给子组件：

1. 通过 children 方式传递
2. 通过 forwardRef 方式传递

但无论采用哪种方式，都会遇到 "Invariant failed" 的错误提示。

代码分析

父组件实现

父组件中创建了两个 ref：

• elementRef：用于拖拽元素
• dragHandleRef：用于拖拽手柄

const elementRef = useRef<HTMLDivElement>(null);
const dragHandleRef = useRef<HTMLButtonElement>(null);

子组件实现

子组件 Toolbar 通过 forwardRef 接收 ref 并传递给内部的 UnstyledButton 组件：

export const Toolbar = forwardRef<HTMLButtonElement, toolbarProps>(
  ({ id, parentId, index, count }, ref) => {
    return (
      <UnstyledButton ref={ref}>
        <Icon icon="arrows" type="fas" />
      </UnstyledButton>
    );
  }
);

问题根源

经过深入排查，发现问题并非出在 ref 传递机制本身，而是由于：

1. 拖拽手柄元素在初始渲染时被隐藏（display: none）
2. 组件挂载时 ref 尚未指向实际 DOM 元素
3. 拖拽初始化逻辑执行时无法获取有效的 DOM 引用

解决方案

方案一：使用 visibility 替代 display

将隐藏元素的样式从 display: none 改为 visibility: hidden：

• display: none 会完全从文档流中移除元素
• visibility: hidden 会保留元素在文档流中的位置，只是视觉上不可见

// 修改前
.hidden-element {
  display: none;
}

// 修改后
.hidden-element {
  visibility: hidden;
}

方案二：延迟初始化

在确保元素已挂载后再初始化拖拽逻辑：

useEffect(() => {
  const timer = setTimeout(() => {
    const element = elementRef.current;
    const dragHandle = dragHandleRef.current;
    
    if (element && dragHandle) {
      // 初始化拖拽逻辑
    }
  }, 100);

  return () => clearTimeout(timer);
}, []);

最佳实践建议

1. 避免在隐藏元素上初始化交互：确保交互元素在初始化时是可见的或至少存在于 DOM 中
2. 使用 TypeScript 类型检查：明确 ref 的类型可以提前发现潜在问题
3. 添加防御性编程：在使用 ref 前进行空值检查
4. 考虑渲染时机：对于条件渲染的元素，确保交互逻辑在元素渲染后执行

总结

在 React 中实现拖拽功能时，正确处理 ref 的传递和元素的生命周期至关重要。通过本文的分析，我们了解到：

1. 元素隐藏方式会影响 ref 的可用性
2. forwardRef 是传递 ref 的有效方式
3. 防御性编程可以避免运行时错误

希望这些经验能帮助开发者在实现类似功能时避免常见陷阱。