react遞歸組件實現樹的示例詳解

更新時間：2024年10月30日 08:30:36 作者：omijer

在一些react項目中,常常有一些需要目錄樹這種結構,這篇文章主要為大家介紹了如何使用遞歸組件實現樹,感興趣的小伙伴可以了解下

需求點

在一些react項目中，常常有一些需要目錄樹這種結構，在很多ui組件庫中都有實現，但不知道實現的方式，下面可以根據遞歸組件來實現樹的操作

具體實現

1.數據結構定義

可以將組件的數據定義如下，其中key代表當前的節(jié)點key； content代表節(jié)點的內容；children代表子節(jié)點，子節(jié)點的數據結構與父節(jié)點一致

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組件中增加狀態(tài)控制樹的展開與關閉

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>
    );
};