脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react树

react递归组件实现树的示例详解

 更新时间：2024年10月30日 08:30:36   作者：omijer  
在一些react项目中,常常有一些需要目录树这种结构,这篇文章主要为大家介绍了如何使用递归组件实现树,感兴趣的小伙伴可以了解下

需求点

在一些react项目中，常常有一些需要目录树这种结构，在很多ui组件库中都有实现，但不知道实现的方式，下面可以根据递归组件来实现树的操作

具体实现

1.数据结构定义

可以将组件的数据定义如下，其中key代表当前的节点key； content代表节点的内容；children代表子节点，子节点的数据结构与父节点一致

export type TreeProps = {
    key: string;
    content: React.ReactNode;
    children: TreeProps[];
};

2.实现组件

import { fakeData } from "./constant";
import { TreeProps } from "./type";
import "./tree.css";

const Tree = () => {
    return (
        <div>
            {fakeData.map((item) => {
                return <TreeItem item={item} key={item.key} />;

            })}
        </div>
    );
};

const TreeItem = ({ item }: { item: TreeProps }) => {
    return (
        <div className="tree-item">
            <div className="content">{item.content}</div>
            {/* 如果子组件存在多个元素，就进行递归调用item子组件，不断渲染其内容 */}
            {item.children.length > 0 && (
            <>
                {item.children.map((child) => {
                    return <TreeItem item={child} key={child.key} />;
                })}
            </>
            )}
        </div>
    );
};

export default Tree;

可以看到效果如下

可以看到基本上实现了文件树的结构，下面我们实现反转的功能

下载antd的图标库

npm install --save @ant-design/icons

在TreeItem组件中增加状态控制树的展开与关闭

const TreeItem = ({ item }: { item: TreeProps }) => {

    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className="tree-item">
            <div className="content" onClick={() => setIsOpen(!isOpen)}>
            <>
                {item.children.length > 0 ? (
                <>
                    {isOpen ? (
                        <DownOutlined style={styles} />
                        ) : (
                        <RightOutlined style={styles} />
                    )}
                </>
                ) : (
                    <LineOutlined style={styles} />
                )}
             </>
            <div>{item.content}</div>
            </div>
            {/* 如果子组件存在多个元素，就进行递归调用item子组件，不断渲染其内容 */}
            {item.children.length > 0 && isOpen && (
            <>
            {item.children.map((child) => {
                return <TreeItem item={child} key={child.key} />;
             })}
            </>
        )}
        </div>
    );
};

实现效果

总结

使用递归组件的方式实现了树组件，了解其作用原理

在子组件内部实现其展开与关闭操作，可以避免在一些组件操作的时候，更新整个组件，提升了一定的性能

以上就是react递归组件实现树的示例详解的详细内容，更多关于react树的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • react 父组件与子组件之间的值传递的方法

    react 父组件与子组件之间的值传递的方法

    本篇文章主要介绍了react 父组件与子组件之间的值传递的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React实现卡片拖拽效果流程详解

    React实现卡片拖拽效果流程详解

    这篇文章主要介绍了React Web开发实战示例，实现卡片拖拽效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • React学习之受控组件与数据共享实例分析

    React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下
    2020-01-01
  • React 组件权限控制的实现

    React 组件权限控制的实现

    本文主要介绍了React 组件权限控制的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • React组件与事件的创建使用教程

    React组件与事件的创建使用教程

    react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向，今天通过本文给大家介绍React事件绑定的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2023-02-02
  • ReactNative-JS 调用原生方法实例代码

    ReactNative-JS 调用原生方法实例代码

    这篇文章主要介绍了ReactNative-JS 调用原生方法实例代码的相关资料,需要的朋友可以参考下
    2016-10-10
  • React中重新实现强制实施表单的流程步骤

    React中重新实现强制实施表单的流程步骤

    这篇文章主要介绍了React中重新实现强制实施表单的流程步骤,就像设计人员一样,在添加逻辑之前,您需要为不同的状态“模拟”或创建“模拟”,例如,这里只是表单的视觉部分的模拟,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-05-05
  • react-player实现视频播放与自定义进度条效果

    react-player实现视频播放与自定义进度条效果

    本篇文章通过完整的代码给大家介绍了react-player实现视频播放与自定义进度条效果，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2022-01-01
  • React的setState批量更新机制详解

    React的setState批量更新机制详解

    React 的 setState 批量更新是 React 优化性能的重要机制,它通过减少不必要的渲染次数来提高应用性能,下面我将详细解释这一过程,需要的朋友可以参考下
    2025-05-05
  • 详解React setState数据更新机制

    详解React setState数据更新机制

    这篇文章主要介绍了React setState数据更新机制的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
    2021-04-04

最新评论