Использование jsPlumb с React

Question

Я передаю некоторые элементы из реакции и подключения с помощью jsPlumb. Каждый раз, когда происходит изменение конфигурации, я снова подключаю узлы. Но я получаю ошибки от 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) 
    } 
}