Verwendung von jsPlumb mit React

Question

Ich render einige Elemente von reagieren und verbinden mit jsPlumb. Jedes Mal, wenn es eine Änderung in der Konfiguration gibt, verbinde ich die Knoten neu. Aber ich bekomme Fehler von jsPlumb aus der zweiten Rendering Start wie

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

Dann werden alle drag/bewegen Interaktion von jsplumb nicht mehr mit Fehlern arbeiten.

Was wäre der beste Weg, um die jsPlumb-Instanz mit dem Entfernen aller Endpunktverweise und Verbindungen zurückzusetzen? Ich mache jsPlumbInstance.reset(), aber es hilft nicht.

Answer 1

Was ich tue ist, ich benutze eine Komponente für jede Kante, die nur ein leeres div rendert und die Edge-Info und jsplumb-Instanz durch die Requisiten übergeben. Dann verfolgt die Elternkomponente, welche Kanten verbunden sind.

In der übergeordneten Klasse:

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

Das Kind Klasse:

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