reactjs - React-beautiful-dnd 与其他 Dragging 包的冲突

Question

我正在尝试在一个应用程序中同时使用 D3 并行 parcoords 和 Material-table。每个组件都可以单独运行。但是当它们一起渲染时，react-beautiful-dnd 内部会出现问题。D3 parallel parcoords 在内部使用 d3-dragging 包，material-table 使用 react-beautiful-dnd 包。

<div className="App">
      <Chart data={chartData} update={updateGridData} colorSet={colorSet} mouseOverRow={overRow} />
      <EditableGrid data={gridData} update={updateChartData} overRow={updateOverRow} />
</div>

发生的问题如下。

我认为，因为每个组件中的 react-beautiful-dnd 和 d3-dragging 在渲染时会相互影响，所以会发生此问题。

Answer 1

我通过在 react-beautiful-dnd 上的 ref 解决了更改 innerRef

改变：

<Component innerRef={provided.innerRef} {...provided.droppableProps}>

至：

<Component ref={provided.innerRef} {...provided.droppableProps}>

https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md#using-innerref