Question

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

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

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

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

Answer 1

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

将jsPlumb与React一起使用

1 个答案: