在 react-beautiful-dnd 库中提供答案

【问题标题】：provided in react-beautiful-dnd library在 react-beautiful-dnd 库中提供
【发布时间】：2021-11-01 20:33:52
【问题描述】：

我正在做“待办事项列表”，我想移动列和卡片，我想做拖放。

我的问题是我无法理解这些术语：

“提供”。
“提供的.draggableProps”

3."provided.dragHandleProps"

4."provided.innerRef".

  <Draggable draggableId={props.task.id} index={props.index}>
        {(provided) => (
          <Box
            sx={{
              display: "flex",
              flexWrap: "wrap",
              "& > :not(style)": {
                m: 1,
                width: 128,
                height: 128,
              },
            }}
            // i put it in the component that i want to move it
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            ref={provided.innerRef}
          >
            <Paper elevation={3}>{props.task.content}</Paper>
          </Box>
        )}
      </Draggable>

【问题讨论】：

标签： reactjs react-beautiful-dnd

【解决方案1】：

您正在直接在 Draggable 组件内部创建一个函数，该组件传入 provided 参数。

注意：这个函数可以传入两个参数，包括一个快照参数，但我猜你没有使用它。

provided 参数包含库正常工作所需的信息和对代码的引用。

您添加了 provided.innerRef，它将为库创建一个引用以访问列表元素的 HTML 元素。它还将 props 应用于元素 (provided.draggableProps)，允许库跟踪移动和定位。

provided.draggableProps - 这是一个包含数据属性和内联样式的对象。此对象需要应用于您应用 provided.innerRef 的同一节点。这控制了可拖动对象在拖动和不拖动时的移动

provided.dragHandleProps - (?DragHandleProps) 每个 Draggable 都有一个拖动手柄。这是用来拖动整个Draggable的。通常这将是与相同的节点，但有时它可能是 Draggable 的子节点。需要将 DragHandleProps 应用到您想成为拖动手柄的节点。这是需要应用到 Draggable 节点的一些道具。

如果您需要更多信息，请随时阅读文档

https://github.com/atlassian/react-beautiful-dnd

【讨论】：