将 jsPlumb 与 React 一起使用

Question

我正在使用 jsPlumb 从 react 和连接中渲染一些元素。每次配置发生变化时，我都会重新连接节点。 但是我从 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)
  }
}