react 拖拽连接插件_react可拖动的好用的树结构插件

react tree 可拖动树结构：

github地址：

安装：

NPM

npm install react-sortable-tree –save

YARN

yarn add react-sortable-tree

引用

import SortableTree from ‘react-sortable-tree’;

import ‘react-sortable-tree/style.css’;

使用

此处我是做成可公共组件props可传data数据调用的公用组件.

export default class SortableTrees extends React.PureComponent {

// 定义propTypes传输类型：

static propTypes = {

isDrop: PropTypes.bool, // 是否可以拖动

treeData: PropTypes.array, // 树结构数据

onChangeVal: PropTypes.func, // 值改变触发事件

haveChildren: PropTypes.bool, // 是否有子级

};

// 设置默认值

static defaultProps = {

isDrop: true,

haveChildren: true,

treeData: [{

title: 'Workflow test',

expanded: true,

children: [{

title: 'taskflow test',

}, {

title: 'taskflow test1',

expanded: true,

children: [{

title: 'taskflow2-1',

}, {

title: 'taskflow2-2',

}],

}],

}],

onChangeVal: () => {},

};

//调用组件时，值发生改变接收新的数据

onChangeValue = (treeData) => {

this.props.onChangeVal(JSON.stringify(treeData));

}

//是否可以拖动(默认可以不添加, 根据需求而定)

stopParentNode = (node) => {

if (!node.nextParent) {

return false;

}

return true;

}

//是否有子级(默认可以不添加, 根据需求而定)

toHaveChildren = (node) => {

if (node.type === 'streaming') {

return false;

}

return true;

}

// render

render() {

const {

isDrop,

treeData,

haveChildren,

} = this.props;

return (

treeData={treeData}

onChange={(e) => { this.onChangeValue(e); }}

canDrop={isDrop ? this.stopParentNode : () => { return false; }}

canNodeHaveChildren={haveChildren ? this.toHaveChildren : () => { return false; }}

/>

);

}

}

外部调用此组件

treeData={treeData} // treeData是你自己的数据

onChangeVal={(treeDatas) => { this.setTreeData(treeDatas); }}

/>

Props 参数

treeData (object): 树结构数据

onChange (func): 数据发生改变时触发(例如：拖动)

getNodeKey (func): 数据更改时，得到node节点

generateNodeProps (func): 添加自定义结构

onMoveNode (func): 移动node触发

onVisibilityToggle (func): 子节点收起或展开时触发

onDragStateChanged (func): 拖动开始或结束时调用

maxDepth (number): 可以插入最大深度节点。 默认为无限

rowDirection (string): 行方向

canDrag (func or bool): 是否禁止拖动

canDrop: (func): 返回false以防止节点掉入给定位置

canNodeHaveChildren: (func): 是否有自己功能

theme (object): 主题风格

searchMethod (func): 搜索功能

className (string): class

rowHeight (number or func): 行高

---- 感谢观看 :thank you: ----