使用 react-beautiful-dnd 删除元素后如何保持适当的间距？

Question

我正在使用 Material UI 和 react-beautiful-dnd 创建一个非常简单的 Grid 列布局，其中的元素可以重新排序。但是，我遇到了这个很难解释的元素间距问题，所以我只给你看一个 gif：

我不确定这个问题可能来自哪里，甚至不知道如何称呼它。在内部，Grid 的 spacing 属性是使用 padding 实现的，我什至找不到任何信息说明为什么它不适用于拖放系统.这是代码的主要部分：

import { makeStyles } from "@material-ui/core";
import { Grid, Paper } from "@material-ui/core";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { produce } from "immer";

function ReorderQuestion(props) {
  const [items, setItems] = useState(props.items);
  const classes = useStyles();

  function onDragEnd({ source, destination }) {
    if (!destination) {
      return;
    }

    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }

    setItems(
      produce(draft => {
        draft.splice(destination.index, 0, draft.splice(source.index, 1)[0]);
      })
    );
  }

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="reorderQuestion" direction="horizontal">
        {provided => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            <Grid spacing={3} container direction="row">
              {items.map((imageSrc, index) => (
                <Grid item key={imageSrc}>
                  <Draggable draggableId={imageSrc} index={index}>
                    {(provided, snapshot) => (
                      <Paper
                        innerRef={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        elevation={
                          snapshot.isDragging && !snapshot.isDropAnimating
                            ? 5
                            : 2
                        }
                        className={classes.option}
                      >
                        <img src={imageSrc} alt="Hiking" />
                      </Paper>
                    )}
                  </Draggable>
                </Grid>
              ))}
              {provided.placeholder}
            </Grid>
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

const useStyles = makeStyles(theme => ({
  option: {
    padding: theme.spacing(2)
  }
}));

Answer 1

找到解决方案，感谢 Reactiflux Discord 上的@mal#8537。

问题是 innerRef 被提供给 Paper 组件，它实际上不包含间距 - 即，它不使用边距。 Grid item，其父组件，使用填充来实现间距，因此必须将其移动到 Draggable 内部，并提供 innerRef（和 draggableProps）用于正确拖动间距。

我只是将 items.map 的内部替换为：

<Draggable draggableId={imageSrc} index={index} key={imageSrc}>
    {(provided, snapshot) => (
        <Grid item
            innerRef={provided.innerRef} // PROVIDE REF HERE, TO GRID
            {...provided.draggableProps}>
          <Paper
            {...provided.dragHandleProps}
            elevation={
              snapshot.isDragging && !snapshot.isDropAnimating
                ? 5
                : 2
            }
            className={classes.option}
          >
            <img src={imageSrc} alt="Hiking" />
          </Paper>
        </Grid>
    )}
</Draggable>

使用 react-beautiful-dnd 删除元素后如何保持适当的间距？

How do I maintain proper spacing after my element is dropped using react-beautiful-dnd?

reactjs

material-ui

padding

react-beautiful-dnd