作為復(fù)制粘貼一族刻蚯，在網(wǎng)絡(luò)上搜來搜去谋旦，搜完頭都大了剩失，每個人說的都不一樣屈尼，不是代碼報警就是報錯，經(jīng)過幾次測試拴孤，無奈動手自己寫一篇脾歧。
首先是React下安裝JsPlumbjs：npm install jsplumb --save。
上代碼演熟。
import { useState, useEffect } from 'react';
import jsplumb from 'jsplumb';
const Component = () => {
const [jsPlumbInstance] = useState(jsplumb.jsPlumb.getInstance());
useEffect(() => {
jsPlumbInstance.ready(() => {
jsPlumbInstance.reset();
jsPlumbInstance.setContainer('LineContainer');
jsPlumbInstance.registerConnectionType('basic', {
anchor: ['Continuous', { faces: ['left', 'right'] }],
connector: 'Straight',
anchors: 'Right',
endpoint: 'Blank',
paintStyle: { stroke: '#000', strokeWidth: 1 },
});
jsPlumbInstance.connect({
// @ts-ignore
type: 'basic',
source: 'item_left',
target: 'item_right',
});
jsPlumbInstance.draggable('item_left');
jsPlumbInstance.draggable('item_right');
});
}, []);
useEffect(() => {
return () => {
if (jsPlumbInstance) {
jsPlumbInstance.reset();
}
};
}, []);
return (
<div id="LineContainer" style={{ display: 'relative' }}>
<div id="item_left" style={{ display: 'absolute' }}></div>
<div id="item_right" style={{ display: 'absolute' }}></div>
</div>
);
};
export default Component;
代碼里鞭执，只寫了一些核心的要素與邏輯代碼，確保穩(wěn)定運(yùn)行芒粹，如果對該部分有異議兄纺，請留言交流。
