深入理解react-beautiful-dnd中的innerRef使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00685/article/details/148328025

深入理解react-beautiful-dnd中的innerRef使用指南

react-beautiful-dnd atlassian/react-beautiful-dnd: React Beautiful DND 是一个由Atlassian团队开发的高质量React拖放库，提供流畅的交互体验和丰富的自定义选项，广泛应用于创建可拖拽排序的列表和其他拖放功能。项目地址: https://gitcode.com/gh_mirrors/re/react-beautiful-dnd

前言

在react-beautiful-dnd这个优秀的React拖拽库中，innerRef是一个关键但容易被误解的概念。本文将全面解析innerRef的工作原理、常见误区以及正确使用方法，帮助开发者更好地掌握react-beautiful-dnd的核心机制。

innerRef的基本概念

在react-beautiful-dnd中，<Draggable>和<Droppable>组件都需要操作真实的DOM元素来实现拖拽功能。innerRef就是用来获取这些DOM元素的桥梁。

基础用法示例

<Draggable draggableId="draggable-1" index={0}>
  {(provided) => (
    <div
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
    >
      可拖拽内容
    </div>
  )}
</Draggable>

React ref机制深度解析

理解innerRef前，必须掌握React的ref工作机制：

组件实例引用：当ref用于类组件时，回调参数是组件实例
DOM元素引用：当ref用于原生HTML元素时，回调参数是DOM节点

这种差异正是许多问题的根源。

常见错误模式

开发者常犯的一个错误是将innerRef直接用于自定义组件：

// 错误示例！这将导致应用崩溃
<Draggable draggableId="draggable-1" index={0}>
  {(provided) => (
    <CustomComponent
      ref={provided.innerRef}
      {...provided.draggableProps}
    />
  )}
</Draggable>

问题在于provided.innerRef期望接收DOM节点，但这里得到的是CustomComponent的实例。

正确解决方案

方案1：通过props传递ref

最可靠的方式是在自定义组件中暴露一个专门的prop来接收DOM引用：

class CustomComponent extends React.Component {
  render() {
    return (
      <div 
        ref={this.props.innerRef}
        {...this.props}
      >
        组件内容
      </div>
    );
  }
}

// 使用方式
<Draggable draggableId="draggable-1" index={0}>
  {(provided) => (
    <CustomComponent
      innerRef={provided.innerRef}
      {...provided.draggableProps}
    />
  )}
</Draggable>

方案2：更精细的ref控制

如果需要同时在组件内部使用ref，可以采用更精细的控制方式：

class CustomComponent extends React.Component {
  setRef = (ref) => {
    this.domRef = ref; // 组件内部使用
    this.props.innerRef(ref); // 传递给react-beautiful-dnd
  };

  render() {
    return (
      <div 
        ref={this.setRef}
        {...this.props}
      >
        组件内容
      </div>
    );
  }
}

样式组件注意事项

对于styled-components v4+和emotion v10+等现代CSS-in-JS库：

它们使用React的forwardRef API
不再需要innerRef，直接使用ref即可
会自动将ref转发到底层DOM元素

const StyledDiv = styled.div`
  /* 样式定义 */
`;

<Draggable draggableId="draggable-1" index={0}>
  {(provided) => (
    <StyledDiv
      ref={provided.innerRef}
      {...provided.draggableProps}
    >
      可拖拽样式组件
    </StyledDiv>
  )}
</Draggable>

性能优化建议

避免不必要的重新渲染：确保ref回调函数是稳定的
分离props：将拖拽相关props与其他props分开处理
使用React.memo：对于复杂的拖拽项可以考虑使用memo优化

SVG特殊处理

react-beautiful-dnd不支持直接拖拽<svg>元素，解决方案是：

<Draggable draggableId="svg-draggable" index={0}>
  {(provided) => (
    <div  // 使用div包裹svg
      ref={provided.innerRef}
      {...provided.draggableProps}
    >
      <svg width="100" height="100">
        {/* svg内容 */}
      </svg>
    </div>
  )}
</Draggable>