反应和jQuery dom操纵

Question

我正在构建一个需要拖放接口的应用程序，以及连接掉落元素并构建流程图的功能。

我正在使用React和Jsplumb。我知道Jsplumb使用jQuery，它不建议使用jQuery并共同做出反应，但需要大量的时间投资才能建立自定义的Jsplumb替代方案。

我添加了按预期工作的元素，但是我遇到了一些问题，从dom。

中删除元素

这是基本结构：

我在父组件中有一个称为MyArray的状态。当用户将图标放在掉落区域时，我正在创建一个新对象来表示掉落的项目，然后将其推到MyArray上。然后，我致电SetState更新MyArray状态。MyArray以道具的形式传递到渲染节点组件中：

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

然后在Rendernodes组件中，我正在循环浏览数组中的每个元素，并使用jsplumb使其可拖动，使目标，源，源等...

...

示例：

jsPlumb.draggable(elementStateId, {});
jsPlumb.makeTarget(elementStateId, {
  anchor: 'Continuous',
  endpoint: ["Dot", {
    radius: 3
  }],
  maxConnections: 4
});
jsPlumb.makeSource(elementConnectId, {
  parent: elementStateId,
  anchor: 'Continuous',
  endpoint: ["Dot", {
    radius: 3
  }],
  connectorOverlays: [
    ["Arrow", { width: 15, length: 15, location: 1, id: "arrow" }]
  ]
});

用户从可拖动区域删除元素时，我需要删除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的专家，所以我不确定如何解决这个问题？我对任何建议都开放。

Answer 1

使每个节点成为组件，然后在卸载时分离连接。完全不要使用jsplumb.remove（）。

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