React和jQuery DOM操作

我正在构建一个需要拖放界面的应用程序，以及连接拖放元素和构建流程图的功能。React和jQuery DOM操作

我正在使用React和jsplumb。我知道jsplumb使用jQuery，不建议一起使用jQuery和React，但它需要大量的时间投入来构建自定义的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形成DOM。所以我打电话：

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，并随即反应过来试图做的DOM操作的背景和它与我的jQuery的更新冲突

我不是React专家，所以我不知道我该如何解决这个问题？我愿意接受任何建议。

来源

2017-03-16 B_McG

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

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

来源

2017-03-22 01:27:26 Jesse

React和jQuery DOM操作

回答

相关问题