react遞歸組件實現(xiàn)樹的示例詳解

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

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

需求點

在一些react項目中，常常有一些需要目錄樹這種結(jié)構(gòu)，在很多ui組件庫中都有實現(xiàn)，但不知道實現(xiàn)的方式，下面可以根據(jù)遞歸組件來實現(xiàn)樹的操作

具體實現(xiàn)

1.數(shù)據(jù)結(jié)構(gòu)定義

可以將組件的數(shù)據(jù)定義如下，其中key代表當(dāng)前的節(jié)點key； content代表節(jié)點的內(nèi)容；children代表子節(jié)點，子節(jié)點的數(shù)據(jù)結(jié)構(gòu)與父節(jié)點一致

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

2.實現(xiàn)組件

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>
            {/* 如果子組件存在多個元素，就進行遞歸調(diào)用item子組件，不斷渲染其內(nèi)容 */}
            {item.children.length > 0 && (
            <>
                {item.children.map((child) => {
                    return <TreeItem item={child} key={child.key} />;
                })}
            </>
            )}
        </div>
    );
};

export default Tree;

可以看到效果如下

可以看到基本上實現(xiàn)了文件樹的結(jié)構(gòu)，下面我們實現(xiàn)反轉(zhuǎn)的功能

下載antd的圖標(biāo)庫

npm install --save @ant-design/icons

在TreeItem組件中增加狀態(tài)控制樹的展開與關(guān)閉

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>
            {/* 如果子組件存在多個元素，就進行遞歸調(diào)用item子組件，不斷渲染其內(nèi)容 */}
            {item.children.length > 0 && isOpen && (
            <>
            {item.children.map((child) => {
                return <TreeItem item={child} key={child.key} />;
             })}
            </>
        )}
        </div>
    );
};