Javascript React和jquerydom操作

我正在构建一个应用程序，它需要一个拖放界面以及连接被拖放元素和构建流程图的能力

我正在使用React和jsplumb。我知道jsplumb使用jQuery，不建议同时使用jQuery和React，但构建定制的jsplumb替代方案需要大量的时间投资

我添加了一些元素，但在从DOM中删除元素时遇到了一些问题

这是基本结构：

在父组件中有一个名为myArray的状态。当用户在放置区域放置图标时，我正在创建一个新对象来表示所放置的项目，然后将其推到myArray上。然后调用setState来更新myArray状态。myArray作为道具传递到渲染节点组件中：

<RenderNodes myArray={this.state.myArray} />

当用户从可拖动区域删除元素时，我需要从DOM中删除div。因此，我打电话：

jsPlumb.remove(elementStateId);

以及从myArray状态块中删除元素

var newArray = myArray.splice(elementIndex, 0);

this.setState({
    myArray: newArray
});

这将导致RenderNodes组件重新渲染，还将导致以下错误

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

我想这是因为我用jQuery从DOM中删除了一个元素，然后React试图在后台进行DOM操作，它与我的jQuery更新冲突

---

我不是React的专家，所以我不确定应该如何着手解决这个问题？我愿意接受任何建议。

将每个节点作为一个组件，然后在卸载时分离连接。根本不要使用jsPlumb.remove（）

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

componentWillUnmount () {
    jsPlumb.detachAllConnections(this.props.elementStateId);
}