React Suite TreePicker 组件

React Suite TreePicker 是一款基于 React 组件库的树形选择器组件，可以用于选择树形结构的数据。

使用方式

使用 React Suite TreePicker 组件，需要先安装 react 和 rsuite 两个依赖库。可以通过 npm 或 yarn 来进行安装：

# 使用 npm 安装
npm install react rsuite

# 使用 yarn 安装
yarn add react rsuite

安装完所需的依赖库后，就可以在项目中引入 TreePicker 组件：

import { TreePicker } from 'rsuite';

function MyComponent() {
  const data = [
    {
      label: 'Root',
      value: 'root',
      children: [
        {
          label: 'Node 1',
          value: 'node1',
        },
        {
          label: 'Node 2',
          value: 'node2',
          children: [
            {
              label: 'Node 2-1',
              value: 'node2-1',
            },
            {
              label: 'Node 2-2',
              value: 'node2-2',
            },
          ],
        },
      ],
    },
  ];

  return (
    <TreePicker data={data} />
  );
}

上述代码中，我们创建了一个树形结构的数据，然后将这个数据作为 TreePicker 组件的 data 属性值传入，即可渲染出一个树形选择器。

核心属性

React Suite TreePicker 组件提供了一系列的属性，用于控制组件的功能和样式。下面列出其中一些常用的核心属性：

• data：树形数据，格式为数组。
• value：选中的值，可以是单个值或多个值。
• defaultValue：默认选中的值，可以是单个值或多个值。
• onChange：选中值发生变化时的回调函数，参数为选中的值。
• onClean：清空选中值时的回调函数。
• placeholder：占位符，当未选中值时显示。
• disabled：禁用状态。
• labelKey：数据中用于显示文本的字段名，默认为 'label'。
• valueKey：数据中用于传递值的字段名，默认为 'value'。
• expandAll：是否展开所有节点，默认为 false。

高级用法

React Suite TreePicker 组件还提供了一些高级用法，让你可以更灵活地控制组件的行为。下面列出其中一些常用的高级用法：

自定义展开图标和折叠图标

可以通过设置 renderTreeNodeIcon 属性来自定义节点的展开图标和折叠图标。

<TreePicker
  data={data}
  renderTreeNodeIcon={(node, hasChildren) => {
    if (hasChildren && node.expanded) {
      return <Icon icon="angle-down" />;
    }

    if (hasChildren && !node.expanded) {
      return <Icon icon="angle-right" />;
    }

    return <Icon icon="circle-o" />;
  }}
/>

自定义节点的显示文本

可以通过设置 renderTreeNodeLabel 属性来自定义节点的显示文本。

<TreePicker
  data={data}
  renderTreeNodeLabel={(nodeLabel, node) => {
    return (
      <div className="node-label">
        <Icon icon="file-text" />
        {nodeLabel}
        <Badge className="node-badge">{node.children && node.children.length}</Badge>
      </div>
    );
  }}
/>

自定义节点的展开和折叠行为

可以通过设置 renderTreeNode 属性来自定义节点的展开和折叠行为。

<TreePicker
  data={data}
  renderTreeNode={(node, level) => {
    return (
      <div className="node" onClick={() => toggleNode(node)}>
        <div className="node-label">
          <Icon icon="folder-o" />
          {node.label}
        </div>
        {node.expanded && node.children && (
          <div className="node-children">
            {node.children.map((child) => (
              <div key={child.value} className="node-child" onClick={() => selectNode(child)}>
                <Icon icon="file-text-o" />
                {child.label}
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }}
/>

上述代码中，我们通过自定义 renderTreeNode 函数来实现了节点的展开和折叠行为。在该函数中，我们可以根据节点的状态自由地渲染节点的内容。