jsPlumbをReactで使用する

Question

jsPlumbを使用して反応と接続からいくつかの要素をレンダリングしています。設定に変更があるたびにノードを再接続しています。 しかし、私はその後jsplumbからすべてのドラッグ/移動相互作用がエラーで動作を停止し

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

状の第2のレンダリングから始まる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) 
    } 
}