ReactJS 蓝图树组件

ReactJS 蓝图树组件是一个基于 ReactJS 开发的可定制化多层级树形控件。蓝图树组件支持各种类型的树形数据展示，数据源可以是静态的本地数据，也可以是动态的远程数据，支持多选和单选，支持自定义节点图标、复选框、展开和折叠按钮等。蓝图树组件提供了一种简洁易用的方式来管理和展示复杂的树形数据。

特性

• 支持多层级数据展示
• 支持引入自定义数据结构和样式
• 支持多选和单选
• 支持节点图标自定义
• 支持自定义展开和折叠按钮

安装

ReactJS 蓝图树组件可以使用 npm 安装：

npm install --save react-blueprint-tree

示例

import React, { Component } from 'react';
import Tree from 'react-blueprint-tree';

const treeData = [
  {
    label: 'Node1',
    value: 'node1',
    children: [
      {
        label: 'Node1.1',
        value: 'node1.1',
      },
      {
        label: 'Node1.2',
        value: 'node1.2',
        children: [
          {
            label: 'Node1.2.1',
            value: 'node1.2.1',
          },
          {
            label: 'Node1.2.2',
            value: 'node1.2.2',
          },
        ],
      },
    ],
  },
  {
    label: 'Node2',
    value: 'node2',
  },
];

class App extends Component {
  handleNodeClick = (node) => {
    console.log('node clicked', node)
  }

  render() {
    return (
      <Tree
        data={treeData}
        onNodeClick={this.handleNodeClick}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

API

Tree Props

• data: (required) Array, 树形数据源
• onNodeClick: PropTypes.func, 节点点击回调函数
• onNodeCheck: PropTypes.func, 节点选中或取消选中回调函数
• onLoadData: PropTypes.func, 异步加载节点回调函数
• onExpand: PropTypes.func, 节点展开回调函数
• onCollapse: PropTypes.func, 节点折叠回调函数
• showCheckbox: PropTypes.bool, 是否显示复选框，默认为 false
• showIcon: PropTypes.bool, 是否显示节点图标，默认为 false
• showExpandBtn: PropTypes.bool, 是否显示展开按钮，默认为 false
• showCollapseBtn: PropTypes.bool, 是否显示折叠按钮，默认为 false
• checkable: PropTypes.bool, 是否可以选中，默认为 false
• defaultExpandAll: PropTypes.bool, 是否默认展开所有节点，默认为 false
• defaultCheckedKeys: PropTypes.array, 默认选中的 key 数组
• defaultExpandedKeys: PropTypes.array, 默认展开的 key 数组

总结

ReactJS 蓝图树组件提供了一种在 ReactJS 环境下轻松展示复杂树形数据的解决方案，可支持自定义多层级数据、节点样式、多选和单选等特性。它的高度定制化设计使其非常适合实际应用中的各种需求，为前端开发带来了更多的便利性。