shx-react-ui

一个简洁、高效的 React UI 组件库，专注于提供易用且可定制的交互组件。

安装

使用 npm 或 yarn 安装:

# 使用 npm
npm install shx-react-ui

# 使用 yarn
yarn add shx-react-ui

快速开始

导入组件

import { Tree } from 'shx-react-ui';
import 'shx-react-ui/dist/components.css'; // 导入样式

基本用法

import React from 'react';
import { Tree, TreeNode } from 'shx-react-ui';

function App() {
  const treeData = [
    {
      id: '1',
      name: "父节点 1",
      children: [
        {
          id: '1-1',
          name: "子节点 1.1",
          isSelected: true,
        },
        {
          id: '1-2',
          name: "子节点 1.2",
          isSelected: false,
        }
      ],
      isSelected: false,
    },
  ];

  const handleChange = (node) => {
    console.log('节点状态变化:', node);
  };

  return (
    <div className="App">
      <h2>树形组件示例</h2>
      <Tree data={treeData} onChange={handleChange} />
    </div>
  );
}

export default App;

组件

Tree 树形组件

树形组件支持多级展示、展开/折叠功能以及节点选择功能。

属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | data | TreeNode[] | - | 树形数据 | | onChange | (node: TreeNode) => void | - | 节点选中状态变化时的回调函数 |

TreeNode 接口

interface TreeNode {
  id: string;          // 节点唯一标识
  name: string;        // 节点显示名称
  isSelected?: boolean; // 是否选中
  indeterminate?: boolean; // 半选状态（仅内部使用）
  expanded?: boolean;  // 是否展开
  children?: TreeNode[]; // 子节点
}

功能特性

• 多层级支持：可以创建任意深度的嵌套树结构
• 选中联动：父节点选中会选中所有子节点，子节点全部选中会使父节点选中
• 半选中状态：当部分子节点被选中时，父节点显示为半选中状态
• 展开/折叠：支持节点的展开和折叠，优化大型树的显示
• 层级视觉区分：通过缩进和连接线清晰展示层级关系

开发

目录结构

/
├── dist/               # 构建输出目录
├── example/            # 示例应用
├── packages/           # 组件源码
│   ├── index.ts        # 主入口
│   └── Tree/           # 树组件
├── package.json        # 项目配置
└── vite.config.ts      # Vite 配置

开发命令

# 启动开发服务器
npm run dev

# 构建组件库
npm run build

浏览器兼容性

• Chrome (最新)
• Firefox (最新)
• Edge (最新)
• Safari (最新)

许可证

ISC