React beautiful dnd 不支持 React Semantic UI Table

Question

我尝试将 react-beautiful-dnd 与 React Semantic UI Table 结合使用，但由于 provided.innerRef 问题（https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md). 我看到一些用户也遇到了 material ui 的类似问题。 ()。这是代码示例，它适用于正常的 html table 但不适用于语义 ui 反应 table: https://codesandbox.io/s/l467j0wj7m。我将不胜感激任何反馈、解决方案或解决方法。

Answer 1

我遇到了同样的问题并找到了解决方案 here。

在 Table.Body 周围放置一个 Ref 并在 Ref 而不是 Table.Body 上设置 provided.innerRef:

{(provided, snapshot) => (
    <Ref innerRef={provided.innerRef}>
        <Table.Body {...provided.droppableProps}>
        </Table.Body>
    </Ref>
)}

Table.Row也一样：

{(provided, snapshot) => (
    <Ref innerRef={provided.innerRef}>
        <Table.Row  {...provided.draggableProps}
            {...provided.dragHandleProps}>
        </Table.Row>
    </Ref>
)}

这应该可以解决问题。另见：https://github.com/atlassian/react-beautiful-dnd/issues/859

React beautiful dnd 不支持 React Semantic UI Table

React beautiful dnd not working with React Semantic UI Table

reactjs

semantic-ui-react