LM React Tools 🚀

一个集合了高质量 React 组件、实用 Hook 和工具方法的工具库。

🌐 官网地址: https://gongliming-qd.github.io/lm-react-tools

✨ 特性

• 🎨 丰富的 React 组件库
• ⚡ 高性能的自定义 Hook
• 🛠️ 实用的工具函数
• 📖 完善的文档和示例

📦 安装

# 使用 npm
npm install lm-react-tools

# 使用 yarn
yarn add lm-react-tools

# 使用 pnpm
pnpm add lm-react-tools

📚 插件介绍

基础组件

• Button - 按钮组件
• 更多组件开发中...

Hooks

• useLocalStorage - localStorage 状态管理
• 更多 Hook 开发中...

工具函数

treeUtils - 树形结构操作工具

treeUtils 是一个功能强大的树形结构操作工具集，提供完整的树形数据遍历、查找、删除、层级调整等功能。该工具集专为处理复杂的树形数据结构而设计，支持各种树形操作场景。

核心功能特性：

• 完整的节点信息：提供节点的完整层级信息、父节点链、叶子节点识别和最近节点信息
• 安全的操作：支持数据克隆选项，避免修改原始数据，提供完整的错误处理和状态返回
• 灵活的遍历：支持深度优先遍历，可提前终止遍历，提供完整的节点上下文信息
• 层级调整：支持节点提升（向上移动）和降级（向下移动），自动处理兄弟节点的重新组织

主要方法详解：

• completeTreeFunc - 树形结构遍历函数

  • 通过回调函数处理每个节点，获取完整的节点信息
  • 回调函数参数 nodeInfo 包含以下属性：
    • node - 当前节点对象
    • floor - 层级路径数组（从 1 开始）
    • parentIndex - 父节点索引路径数组（从 0 开始）
    • leaf - 是否为叶子节点
    • parentNodes - 父节点链数组
    • nearestNode - 最近节点（前一个兄弟节点或父节点）
  • 支持提前终止遍历，返回 true 时停止后续遍历

• getTreeIdInfo - 根据节点 ID 获取节点详细信息

  • 快速查找指定 ID 的节点，返回完整的节点信息对象
  • 包含层级路径、父节点信息、叶子节点状态等

• removeTreeNodeById - 根据节点 ID 删除指定节点

  • 安全删除节点，自动处理父子关系
  • 返回删除结果和最近节点信息，便于后续操作

• promoteTreeNodeById - 提升节点层级（上移）

  • 将节点向上移动一级，成为其父节点的兄弟节点
  • 自动处理层级调整后的树结构重组

• demoteTreeNodeById - 降低节点层级（下移）

  • 将节点向下移动一级，成为前一个兄弟节点的子节点
  • 支持复杂的层级调整操作

使用场景：

• 树形菜单操作和管理
• 文件目录结构的增删改查
• 组织架构的层级调整
• 分类系统的层级管理
• 任何需要复杂树形数据操作的业务场景

注意事项：

• 所有节点应有唯一的 id 属性
• 默认会修改原始数据，如需保留原始数据请设置 clone=true
• 对于大型树结构，建议使用 clone=false 避免内存开销
• 层级调整操作有相应的边界条件限制

🔨 快速开始

使用组件

• 待补充

使用 Hook

• 待补充

使用工具函数

treeUtils 使用示例

基础用法 - 遍历树形结构

import { completeTreeFunc } from 'lm-react-tools';

const treeData = [
  {
    id: '1',
    name: '节点1',
    children: [
      { id: '1-1', name: '节点1-1' },
      { id: '1-2', name: '节点1-2' },
    ],
  },
  {
    id: '2',
    name: '节点2',
    children: [{ id: '2-1', name: '节点2-1' }],
  },
];

// 遍历所有节点并打印信息
completeTreeFunc(treeData, (nodeInfo) => {
  console.log(`节点ID: ${nodeInfo.node.id}, 层级: ${nodeInfo.floor.join('-')}`);
});

查找节点信息

import { getTreeIdInfo } from 'lm-react-tools';

const treeData = [
  {
    id: '1',
    name: '根节点',
    children: [
      { id: '1-1', name: '子节点1' },
      { id: '1-2', name: '子节点2' },
    ],
  },
];

// 查找指定ID的节点信息
const nodeInfo = getTreeIdInfo({ treeData, id: '1-1' });
if (nodeInfo) {
  console.log('找到节点:', nodeInfo.node.name);
  console.log('层级路径:', nodeInfo.floor);
  console.log('是否是叶子节点:', nodeInfo.leaf);
}

删除节点

import { removeTreeNodeById } from 'lm-react-tools';

const treeData = [
  {
    id: '1',
    name: '父节点',
    children: [
      { id: '1-1', name: '子节点1' },
      { id: '1-2', name: '子节点2' },
      { id: '1-3', name: '子节点3' },
    ],
  },
];

// 删除指定ID的节点
const result = removeTreeNodeById({ treeData, id: '1-2' }, { clone: true });

if (result.success) {
  console.log('删除成功');
  console.log('删除后的树结构:', result.treeData);
  console.log('最近节点:', result.nearestNode?.name);
}

提升节点层级

import { promoteTreeNodeById } from 'lm-react-tools';

const treeData = [
  {
    id: '1',
    name: '祖父节点',
    children: [
      {
        id: '1-1',
        name: '父节点',
        children: [
          { id: '1-1-1', name: '子节点1' },
          { id: '1-1-2', name: '子节点2' },
          { id: '1-1-3', name: '子节点3' },
        ],
      },
    ],
  },
];

// 提升子节点2的层级
const result = promoteTreeNodeById({ treeData, id: '1-1-2' }, { clone: true });

if (result.success) {
  console.log(result.message);
  console.log('提升后的树结构:', result.treeData);
}

降级节点层级

import { demoteTreeNodeById } from 'lm-react-tools';

const treeData = [
  {
    id: '1',
    name: '父节点',
    children: [
      { id: '1-1', name: '子节点1' },
      { id: '1-2', name: '子节点2' },
      { id: '1-3', name: '子节点3' },
    ],
  },
];

// 降级子节点2的层级
const result = demoteTreeNodeById({ treeData, id: '1-2' }, { clone: true });

if (result.success) {
  console.log(result.message);
  console.log('降级后的树结构:', result.treeData);
}

React 组件中使用

import React, { useState } from 'react';
import { getTreeIdInfo, removeTreeNodeById } from 'lm-react-tools';

const TreeDemo = () => {
  const [treeData, setTreeData] = useState([
    {
      id: '1',
      name: '根节点',
      children: [
        { id: '1-1', name: '子节点1' },
        { id: '1-2', name: '子节点2' },
      ],
    },
  ]);

  const handleDelete = (id) => {
    const result = removeTreeNodeById({ treeData, id }, { clone: true });
    if (result.success) {
      setTreeData(result.treeData);
    }
  };

  return (
    <div>
      {treeData.map((node) => (
        <div key={node.id}>
          <span>{node.name}</span>
          <button onClick={() => handleDelete(node.id)}>删除</button>
          {node.children?.map((child) => (
            <div key={child.id} style={{ marginLeft: '20px' }}>
              <span>{child.name}</span>
              <button onClick={() => handleDelete(child.id)}>删除</button>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

export default TreeDemo;

💬 支持

如有问题，请通过以下方式联系：

• 发送邮件至 [email protected]