Question

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

我正在使用React和jsplumb。我知道jsplumb使用jQuery，不推荐使用jQuery和React，但是需要花费大量时间来构建自定义jsplumb替代方案。

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

这是基本结构：

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

<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" }]
  ]
});

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

Answer 1

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

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

React和jQuery DOM操作

1 个答案: