使用react-beautiful-dnd开发代办拖拽列表时对provided相关属性的疑问

Draggable 组件采用渲染属性模式实现逻辑注入，你提到的4个术语都属于它向内部渲染函数传递的工具对象属性，具体作用和用法如下：

• provided
  provided 是 Draggable 内部渲染函数的固定第一个入参，是库封装好的顶层工具集合，所有实现拖拽所需的属性、回调、引用逻辑都挂载在这个对象下，不需要你手动实现拖拽相关的事件监听、位置计算逻辑，直接使用它暴露的属性即可。
• provided.draggableProps
  这是挂载在 provided 下的属性集合，包含控制可拖拽元素位置、状态的所有必要属性：比如拖拽过程中位移的 transform 样式、无障碍相关的 aria 属性、拖拽生命周期的事件回调等，react-beautiful-dnd 靠这些属性控制拖拽过程中元素的表现。
  正确用法：通过扩展运算符 {...provided.draggableProps} 直接绑定到可拖拽元素的根DOM节点上，不要手动修改该对象下的任何属性。
• provided.dragHandleProps
  这是拖拽触发区域（拖拽把手）的属性集合，包含了触发拖拽动作的所有事件监听。你可以选择整个可拖拽元素都作为触发区域，也可以单独指定元素内的某一部分作为触发区域（比如看板卡片仅顶部标题栏可拖拽）。
  正确用法：
  1. 若要整个可拖拽元素都能触发拖拽，直接将 {...provided.dragHandleProps} 和 draggableProps 绑定到同一个根节点即可，和你当前的代码写法一致
  2. 若要单独指定拖拽把手，把该属性集合绑定到你指定的把手节点（比如拖拽图标）上即可，根节点仅保留 draggableProps 和 innerRef
• provided.innerRef
  react-beautiful-dnd 需要拿到可拖拽元素的真实DOM节点来计算位置、实现拖拽动画，这个属性就是用来给库传递DOM引用的入口。
  正确用法：绑定到可拖拽元素根节点的 ref 属性上即可。如果你的根节点是自定义函数组件，需要提前用 React.forwardRef 做ref转发，否则会绑定失败。

你当前的代码写法完全符合规范，将三个属性都绑定到Box根节点，实现了整个Box区域可触发拖拽的效果，不需要调整。

内容的提问来源于stack exchange，提问作者Hiba Youssef