在反應中使用jsPlumb

Question

我使用jsPlumb呈現一些反應和連接的元素。每當配置發生變化時，我都會重新連接節點。 但我從jsPlumb錯誤從第二渲染開始像

.each iteration failed : TypeError: Cannot read property 'force' of undefined

然後，所有拖/從jsplumb移動交互停止與錯誤的工作。

重置jsPlumb實例並刪除所有端點引用和連接的最佳方法是什麼？我正在做jsPlumbInstance.reset（），但它沒有幫助。

Answer 1

我所做的是我使用一個組件爲每個邊緣只呈現一個空的div並通過道具傳遞邊緣信息和jsplumb實例。然後父組件跟蹤哪些邊連接。

在父類：

var edgeComponents = [] 
validEdges.forEach(
  
    edge => {
  
    edgeComponents.push(
  
     <Edge 
     key={${edge.source}-${edge.target}}
  
     edge={edge}
  
     jsPlumb={this.state.jsPlumbInstance}
  
     />
) 
    } 
) 

的子類：

export default class Edge extends Component { 
    componentDidMount(){ 
    const edge = this.props.edge 
    const connection = this.props.jsPlumb.connect({source:edge.source, target:edge.target}) 
    this.setState({connection: connection}) 
    } 

    componentWillUnmount() { 
    this.props.jsPlumb.detach(this.state.connection) 
    } 
}