assistant-note/src/components/ItemTree/index.jsx

import React, { useMemo, useState } from 'react';
import { Input, Tree } from 'antd';
import {FolderOutlined,FileMarkdownOutlined} from '@ant-design/icons';
const { Search } = Input;
// const x = 3;
// const y = 2;
// const z = 1;
const defaultData = [
    {
        "title": "/media/shixiaohua/homedisk",
        "key": "0-0",
        "icon": <FolderOutlined />,
        "children": [
            {
                "title": "electron",
                "key": "0-0-0",
                "icon": <FolderOutlined />,
                "children": [
                    {
                        "title": "leaf",
                        "key": "0-0-0-0",
                        "icon": <FileMarkdownOutlined />
                    }
                ]
            }
        ]
    },
    {
        "title": "media",
        "key": "0-1",
        "icon": <FolderOutlined />,
        "children": []
    }
];
// 将树平铺用于查找
const dataList = [];
const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const { key,title,icon } = node;
        dataList.push({
            key,
            title,
            icon
        });
        if (node.children) {
            generateList(node.children);
        }
    }
};
generateList(defaultData);
const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
            if (node.children.some((item) => item.key === key)) {
                parentKey = node.key;
            } else if (getParentKey(key, node.children)) {
                parentKey = getParentKey(key, node.children);
            }
        }
    }
    return parentKey;
};
const ItemTree = () => {
    const [expandedKeys, setExpandedKeys] = useState([]);
    const [searchValue, setSearchValue] = useState('');
    const [autoExpandParent, setAutoExpandParent] = useState(true);
    const onExpand = (newExpandedKeys) => {
        setExpandedKeys(newExpandedKeys);
        setAutoExpandParent(false);
    };
    const onChange = (e) => {
        const { value } = e.target;
        const newExpandedKeys = dataList
            .map((item) => {
                if (item.title.indexOf(value) > -1) {
                    return getParentKey(item.key, defaultData);
                }
                return null;
            })
            .filter((item, i, self) => !!(item && self.indexOf(item) === i));
        setExpandedKeys(newExpandedKeys);
        setSearchValue(value);
        setAutoExpandParent(true);
    };
    const treeData = useMemo(() => {
        const loop = (data) =>
            data.map((item) => {
                const strTitle = item.title;
                const index = strTitle.indexOf(searchValue);
                const beforeStr = strTitle.substring(0, index);
                const afterStr = strTitle.slice(index + searchValue.length);
                const title =
                    index > -1 ? (
                        <span>{beforeStr}
                            <span className="site-tree-search-value">{searchValue}</span>{afterStr}</span>
                    ) : (
                        <span>{strTitle}</span>
                    );
                if (item.children) {
                    return {
                        title,
                        key: item.key,
                        icon: item.icon,
                        children: loop(item.children),
                    };
                }
                return {
                    title,
                    icon: item.icon,
                    key: item.key,
                };
            });
        return loop(defaultData);
    }, [searchValue]);
    return (
        <div>
            <Search
                style={{marginBottom: 8,}}
                placeholder="Search"
                onChange={onChange}
            />
            <Tree
                // 展开/收起节点时触发
                onExpand={onExpand}
                //（受控）展开指定的树节点
                expandedKeys={expandedKeys}
                // 是否自动展开父节点
                autoExpandParent={autoExpandParent}
                showIcon ={true}
                // treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）
                treeData={treeData}
            />
        </div>
    );
};
export default ItemTree;