我有一个用对象数组递归绘制的树.我能够调出具有所有展开折叠相关功能的树.现在,我想使用输入元素在树中进行搜索.这种搜索应该以递归方式进行.当叶 node 匹配时,树应该显示直到该叶 node 的所有 node .正在扩张.当中间 node 或根 node 匹配时,它应该只显示到该级别,并显示折叠的图标,然后可以展开该图标.
到目前为止,这就是我try 过的.
node 组件
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
export const Node = ({ node, level, currentActive, setCurrentActive }) => {
const [isOpen, setIsOpen] = useState(false);
const hasChildren = !!node?.categories?.length;
const categoryType =
level === 0 ? "category" : !hasChildren ? "leaf" : "group";
if (!node) return null;
const { name, key, categories } = node;
const activeClassName = currentActive === name ? "active" : "";
return (
<>
<div
className={`list-row level-${level} ${categoryType} ${activeClassName}`}
onClick={() => {
setIsOpen((open) => !open);
if (!hasChildren) {
setCurrentActive((prevName) => (!(prevName === name) ? name : ""));
}
}}
key={key}
>
<div className="list-item-holder">
{hasChildren && (
<div className="list-item-expander-holder">
<span
className={`expand-collapse-icon ${
isOpen ? "collapse" : "expand"
}`}
>
<span className="expand-icon">
<FontAwesomeIcon icon="caret-down" />
</span>
<span className="collapse-icon">
<FontAwesomeIcon icon="caret-right" />
</span>
</span>
</div>
)}
<div className="list-item-details-holder">{name}</div>
</div>
</div>
{isOpen && hasChildren && (
<div className="list-row-children">
{categories.map((node) => (
<Node
key={node.key}
node={node}
level={level + 1}
currentActive={currentActive}
setCurrentActive={setCurrentActive}
/>
))}
</div>
)}
</>
);
};
到目前为止,我try 的搜索功能并不起作用
function searchTree(tree, query) {
function traverse(node, query) {
if (node.categories) {
traverse(node.categories, query);
}
return {
...node,
categories: node?.categories?.filter(({ name }) => name === query)
};
}
return tree.map((root) => traverse(root, query));
}
有没有人可以帮助一下如何实现这一点.我还只是个初学者,正在努力学习这一点.如果能帮上忙,我们将不胜感激.
Sandbox 链接:https://codesandbox.io/s/tree-updated-with-search-forked-ms2b6w?file=/src/DrawnTree.jsx:223-617