weizx-react-tree

REACT-TREE

介绍

react技术栈上的树形组件，支持节点新增、删除等功能，配合传入事件能满足大部分场景。

安装方式

npm i @weizx/react-tree

使用方式

import { Tree, useTree } from '@weizx/react-tree';

const props = {
    tree,
    onTreeNodeClick,
    treeNodeClassName,
    treeNodeStyle
};

...
    return (
        <>
            <Tree {...props} />
        </Tree>
    );

const { tree, searchNode, insertNode, updateNode, deleteNode } = useTree();

// 数据源
console.log(tree);

// 查找节点
const node = searchNode(nodeId);

// 新增节点
insertNode(parentNodeId);

// 更新节点
updateNode(nodeId);

// 删除节点
deleteNode(nodeId);

API

Tree

参数	说明	类型	默认值
tree	数据源	object|undefined	-
onTreeNodeClick	节点click事件的回调	((node: TreeNode) => void)|undefined	() => {}
treeNodeClassName	节点类名	string|undefined	''
treeNodeStyle	节点样式	CSSProperties|undefined	{}
insertNodeClick	新增节点click事件的回调	(() => boolean)|undefined	undefined
deleteNodeClick	删除节点click事件的回调	((node: TreeNode) =>boolean)|undefined	undefined

DEMO