React beautiful dnd не работает с React Semantic UI Table
Я пытался использовать 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 с react-beautiful-dnd). Вот пример кода, который правильно работает для обычной таблицы html, но не для таблицы реакции семантического пользовательского интерфейса: https://codesandbox.io/s/l467j0wj7m. Буду признателен за любые отзывы, решения или обходные пути.
Ответы 1
У меня была такая же проблема и я нашел решение здесь.
Поместите Ref вокруг Table.Body и установите provided.innerRef на Ref, а не на Table.Body:
{(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