在 react-beautiful-dnd 库中提供

Question

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

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

“已提供”。
"provided.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>

Answer 1

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

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

提供的 参数包括库正常工作所需的信息和代码参考。

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

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

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

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

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

在 react-beautiful-dnd 库中提供

provided in react-beautiful-dnd library

reactjs

react-beautiful-dnd