脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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中使用外部样式的3种方式(小结)

    React中使用外部样式的3种方式(小结)

    这篇文章主要介绍了React中使用外部样式的3种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • React如何实现视频旋转缩放

    React如何实现视频旋转缩放

    这篇文章主要为大家详细介绍了React如何实现视频旋转缩放功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • React中的函数式插槽详解

    React中的函数式插槽详解

    这篇文章主要为大家详细介绍了React 开发中遇到的具名插槽的函数用法,文中的示例代码讲解详细,具有一定的学习价值,有兴趣的小伙伴可以了解一下
    2023-11-11
  • react项目中express动态路由未能匹配造成的404问题解决

    react项目中express动态路由未能匹配造成的404问题解决

    本文主要介绍了react项目中express动态路由未能匹配造成的404问题解决,解决了白屏的问题,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • 关于react useState更新异步问题

    关于react useState更新异步问题

    这篇文章主要介绍了关于react useState更新异步问题，具有很好的参考价值，希望对大家有所帮助。以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

    2022-08-08
  • 基于React封装一个验证码输入控件

    基于React封装一个验证码输入控件

    邮箱、手机验证码输入是许多在线服务和网站常见的安全验证方式之一,本文主要来和大家讨论一下如何使用React封装一个验证码输入控件,感兴趣的可以了解下
    2024-03-03
  • React 组件性能最佳优化实践分享

    React 组件性能最佳优化实践分享

    这篇文章主要介绍了React组件性能最佳优化实践分享，React组件性能优化的核心是减少渲染真实DOM节点的频率，减少Virtual DOM比对的频率，更多相关内容需要的朋友可以参考一下
    2022-09-09
  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    这篇文章主要介绍了使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2016-10-10
  • React 之 Suspense提出的背景及使用详解

    React 之 Suspense提出的背景及使用详解

    这篇文章主要为大家介绍了React 之 Suspense提出的背景及使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • react如何向数组中追加值

    react如何向数组中追加值

    这篇文章主要介绍了react如何向数组中追加值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09

最新评论