使用jsPlumb与React

Question

我正在使用jsPlumb呈现一些来自react和connecting的元素。每次配置发生变化时，我都要重新连接节点。但我从第二次呈现开始从jsPlumb获得错误，如下所示

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

然后，所有从jsplumb中拖动/移动的交互都会停止处理错误。

通过删除所有端点引用和连接来重置jsPlumb实例的最佳方法是什么？我正在做jsPlumbInstance.reset()，但它没有帮助。

Answer 1

我所做的是为每个边缘使用一个组件，它只呈现一个空的div，并通过道具传递edge信息和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)
  }
}