在 react-beautiful-dnd 库中提供
provided in react-beautiful-dnd library
我正在做“待办事项列表”,我想移动列和卡片,我想拖放。
我的问题是我无法理解这些术语:
“已提供”。
"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>
您正在 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
我正在做“待办事项列表”,我想移动列和卡片,我想拖放。
我的问题是我无法理解这些术语:
“已提供”。
"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>
您正在 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