在反应中使用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) 
    } 
}