React Suite CheckTree 组件介绍

React Suite CheckTree 组件是一款基于 React 的复选框树形组件。它可以帮助开发者轻松的展示复杂的多级树形结构，并支持多选、全选等功能。

特性

• 支持多级树形结构展示
• 支持多选、全选等功能
• 拥有清晰简洁的 API
• 支持自定义图标和样式

安装

使用 npm 进行安装：

npm install rsuite-checktree --save

示例

以下示例演示了使用 React Suite CheckTree 组件展示一个多级树形结构，并添加了多选功能。

import React, { useState } from 'react';
import { CheckTree } from 'rsuite-checktree';

// 定义树形节点数据
const treeData = [
  {
    label: '节点 1',
    value: '1',
    children: [
      {
        label: '节点 1-1',
        value: '1-1'
      },
      {
        label: '节点 1-2',
        value: '1-2'
      }
    ]
  },
  {
    label: '节点 2',
    value: '2',
    children: [
      {
        label: '节点 2-1',
        value: '2-1',
        children: [
          {
            label: '节点 2-1-1',
            value: '2-1-1'
          },
          {
            label: '节点 2-1-2',
            value: '2-1-2'
          }
        ]
      },
      {
        label: '节点 2-2',
        value: '2-2'
      }
    ]
  }
];

function App() {
  // 设置状态变量 selectedValues 用于存储选中的节点值
  const [selectedValues, setSelectedValues] = useState([]);

  // 定义 onCheck 函数，用于处理节点选中事件
  function onCheck(checkedValues) {
    setSelectedValues(checkedValues);
  }

  // 渲染组件
  return (
    <CheckTree
      data={treeData}
      value={selectedValues}
      onChange={onCheck}
      multiple
    />
  );
}

export default App;

API

CheckTree

| 名称 | 类型 | 默认值 | 描述 | | --------- | ---------------- | ------ | ------------------------------------------------------- | | data | array | - | 树形节点数据，格式必须为：{ label, value, children? } | | value | array | - | 选中的节点值 | | onChange | function | - | 节点选中事件的回调函数，函数参数为选中的节点值列表 | | multiple | boolean | false | 是否支持多选 | | disabled | boolean/function | false | 是否禁止选中，并支持禁止选中某个节点，需传入函数判断 | | cascade | boolean | true | 是否支持级联勾选 | | className | string | - | 根节点的 className | | style | object | - | 根节点的 style |

data

树形节点数据，格式必须为：{ label, value, children? }。

• label：节点名称。
• value：节点值。
• children：下级节点数组。

value

选中的节点值，类型为数组。

onChange(checkedValues: string[])

节点选中事件的回调函数。函数参数为选中的节点值列表，类型为字符串数组。

multiple

是否支持多选，默认为 false。

disabled

是否禁止选中，并支持禁止选中某个节点，需传入函数判断。若为 true，则全部禁止选中；若为函数，则当前节点值为函数参数，需返回布尔值。

cascade

是否支持级联勾选，默认为 true。

className

根节点的 className。

style

根节点的 style。

高级用法

自定义图标和样式

React Suite CheckTree 组件内置了一些默认样式，但我们仍可以通过 CSS 或通过 API 来自定义 CheckTree 组件的样式。

CSS 方式

通过 CSS 样式表来修改组件样式，如下所示：

.rs-checktree-node-label {
  color: #999;
}
.rs-checktree-node-checkbox {
  margin-right: 5px;
}

API 方式

我们可以通过 CheckTree 的 renderTreeNodeProps 属性来自定义节点的图标和样式。例如：

import { CheckTree } from 'rsuite-checktree';
import { Icon } from 'rsuite';

function App() {
  const icons = {
    expandIcon: <Icon icon="angle-right" size="lg" />,
    collapseIcon: <Icon icon="angle-down" size="lg" />,
    leafIcon: <Icon icon="file-text-o" size="lg" />,
    uncheckableIcon: <Icon icon="square-o" size="lg" />
  };

  return (
    <CheckTree
      data={data}
      value={selectedValues}
      onChange={handleChange}
      multiple
      height={300}
      renderTreeNodeProps={({ node }) => {
        const label = (
          <span style={{ cursor: 'pointer' }}>{node.label}</span>
        );
        return {
          label,
          checkbox: icons.uncheckableIcon // 禁止选中节点的图标
        };
      }}
    />
  );
}

结语

React Suite CheckTree 组件使得开发者能够快速地构建出复杂多层级的树形结构，并拥有多选、全选等功能，同时也能轻松地通过 API 或 CSS 样式表来自定义组件的样式和行为。