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操作

回答

相關問題