Question

我希望将material-ui与react-beautiful-dnd结合使用以创建可排序的表。但是，使用material-ui的表组件会造成麻烦，因为TableBody将不接受innerRef，而TableRow将不接受innerRef和isDragging。请参阅下面的代码：

git whatchanged/log --name-only --pretty="" origin..HEAD

如何使material-ui可以与这些属性一起使用？

Answer 1

我有同样的问题。您要做的就是将Draggable / Droppable部件移到一个组件中，然后通过component属性将其传递进来。

例如，我希望能够对表标题中的列进行重新排序。行是我的可放置区域，单元格是可拖动区域。

ModuleNotFoundError: No module named 'plugable_api'

注意，我使Droppable Component成为一个返回函数的函数。这样一来，我便可以从主要组件中传入onDragEnd方法。我尝试将DroppableComponent作为JSX放在component属性中，但出现错误，所以这就是我的结果。

对于可拖动部分，我具有以下内容：

public render() {
    return (
        <TableHead component="div">
            <TableRow component={DroppableComponent(this.onDragEnd)}>{headerCells}</TableRow>
        </TableHead>
    );
}

const DroppableComponent = (
    onDragEnd: (result: DropResult, provided: ResponderProvided) => void
) => (props: any) => {
    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId={'1'} direction="horizontal">
                {(provided) => {
                    return (
                        <div ref={provided.innerRef} {...provided.droppableProps} {...props}>
                            {props.children}
                            {provided.placeholder}
                        </div>
                    );
                }}
            </Droppable>
        </DragDropContext>
    );
};

希望这会有所帮助！

Answer 2

我在执行类似任务时遇到了这个问题。关于OP的问题，TableRow和TableBody都支持ref道具（与innerRef相比），该道具转发到根元素。

请参阅常见问题解答：

https://material-ui.com/getting-started/faq/#how-can-i-access-the-dom-element

文档中针对TableRow和TableBody都提到了这一点：

因此，不必根据@Bryant和@ funql.org的答案将“可拖动/可拖放”部分移动到它们自己的组件中。

您也不一定需要将isDragging传递给TableRow（尽管如果您创建了一个接受该prop的自定义包装器组件，则可以这样做）。如果您的用例在拖动时为行设置样式，则可以在className上添加style或TableRow道具，并在isDragging为{{1}时应用条件样式}。

这是Material UI表的工作示例，其中包含可排序的行以及react-beautiful-dnd：

https://codesandbox.io/s/react-material-ui-and-react-beautiful-dnd-uofv4

顺便说一句，我将其创建为issue report的一部分，因为我不确定为什么拖动给定的表行时为什么会有1个像素的跳动（表格单元格底部边框的厚度），但是那是另一个问题！该实现足够可靠，可以支持许多可接受1px轻微视觉毛刺的情况。

Answer 3

我已经使用@Bryant的解决方案创建了一个github示例存储库。 https://github.com/hmarggraff/react-material-ui-table-row-drag-and-drop

它显示了如何将Bryants解决方案与react-material-ui结合起来。它还显示了列与列之间的差异，以及在差异期间的视觉反馈。这是一个完整的可重用解决方案。

使用material-ui表和react-beautiful-dnd

3 个答案: