将 jsPlumb 与 React 结合使用

Question

我正在使用 jsPlumb 渲染来自 React 和连接的一些元素。每次配置发生变化时，我都会重新连接节点。但是我从第二次渲染开始就从 jsPlumb 得到错误，比如

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

然后来自 jsplumb 的所有 drag/move 交互停止工作并出现错误。

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

Answer 1

我所做的是为每个边缘使用一个组件，它只呈现一个空 div 并通过道具传递边缘信息和 jsplumb 实例。然后 parent 组件跟踪连接了哪些边。

在parent class:

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

child class:

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)
  }
}

将 jsPlumb 与 React 结合使用

Using jsPlumb with React

javascript

reactjs

jsplumb