[英]Using jsPlumb with React
I am rendering some elements from react and connecting using jsPlumb. 我正在渲染一些元素,并使用jsPlumb进行连接。 Every time there is a change in the config I am reconnecting the nodes.
每次配置更改时,我都会重新连接节点。 But I get errors from jsPlumb starting from the second rendering like
但是我从jsPlumb从第二个渲染开始出现错误
.each iteration failed : TypeError: Cannot read property 'force' of undefined
Then all drag/move interaction from jsplumb stops working with errors. 然后,所有从jsplumb进行的拖动/移动交互都将停止并出现错误。
What would be the best way to reset jsPlumb instance with removing all endpoint references and connections? 删除所有端点引用和连接来重置jsPlumb实例的最佳方法是什么? I am doing jsPlumbInstance.reset() but its not helping.
我在做jsPlumbInstance.reset(),但没有帮助。
What I do is I use a component for each edge that just renders an empty div and pass the edge info and jsplumb instance in through the props. 我要做的是为每个边缘使用一个组件,该组件仅呈现一个空div并通过props传递边缘信息和jsplumb实例。 Then the parent component keeps track of what edges are connected.
然后,父组件会跟踪连接了哪些边缘。
In the parent class: 在父类中:
var edgeComponents = []
validEdges.forEach(
edge => {
edgeComponents.push(
<Edge
key={${edge.source}-${edge.target}}
edge={edge}
jsPlumb={this.state.jsPlumbInstance}
/>
)
}
)
The 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)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.