Question

我正在React.js上进行一些初学者练习，并使用material-ui创建了一个树形视图组件。现在，我想实现一个搜索栏，以在树视图中搜索输入的关键字。这是我的示例数据：

[
    {
        id: 1,
        name: "Item 1",
        children: [
            {
                id: 2,
                name: "Subitem 1",
                children: [
                    {
                        id: 3,
                        name: "Misc 1",
                        children: [
                            {
                                id: 4,
                                name: "Misc 2"
                            }
                        ]
                    }
                ]
            },
            {
                id: 5,
                name: "Subitem 2",
                children: [
                    {
                        id: 6,
                        name: "Misc 3",
                    }
                ]
            }
        ]
    },
    {
        id: 7,
        name: "Item 2",
        children: [
            {   
                id: 8,
                name: "Subitem 1",
                children: [
                    {
                        id: 9,
                        name: "Misc 1"
                    }
                ]
            },
            {
                id: 10,
                name: "Subitem 2",
                children: [
                    {
                        id: 11,
                        name: "Misc 4"
                    },
                    {
                        id: 12,
                        name: "Misc 5"
                    },
                    {
                        id: 13,
                        name: "Misc 6",
                        children: [
                            {
                                id: 14,
                                name: "Misc 7"
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

渲染部分按预期工作。

const getTreeItemsFromData = treeItems => {
    return treeItems.map(treeItemData => {
        let children = undefined;
        if (treeItemData.children && treeItemData.children.length > 0) {
            children = getTreeItemsFromData(treeItemData.children);
        }
        return(
            <TreeItem
                key={treeItemData.id}
                nodeId={treeItemData.id}
                label={treeItemData.name}
                children={children}/>
        );
    });
};

const DataTreeView = ({ treeItems }) => {
    return(
        <TreeView
            defaultCollapseIcon={<ExpandMoreIcon />}
            defaultExpandIcon={<ChevronRightIcon />}
            >
            {getTreeItemsFromData(treeItems)}
        </TreeView>
    );
};

class App extends Component {
    render() {
        return (
            <div className="App">
               <DataTreeView treeItems={searchedNodes} />
            </div>
        );
    }
}

现在，我正在努力实现搜索功能。我想使用material-search-bar（https://openbase.io/js/material-ui-search-bar）

Answer 1

此解决方案假定您对树中的每个项目使用唯一的id。

它使用深度优先搜索算法。

在尝试操作之前，请修正示例数据的非唯一ID。起初我没有注意到它们，而浪费时间进行调试却没有错误。

function dfs(node, term, foundIDS) {
  // Implement your search functionality
  let isMatching = node.name && node.name.indexOf(term) > -1;

  if (Array.isArray(node.children)) {
    node.children.forEach((child) => {
      const hasMatchingChild = dfs(child, term, foundIDS);
      isMatching = isMatching || hasMatchingChild;
    });
  }

  // We will add any item if it matches our search term or if it has a children that matches our term
  if (isMatching && node.id) {
    foundIDS.push(node.id);
  }

  return isMatching;
}

function filter(data, matchedIDS) {
  return data
    .filter((item) => matchedIDS.indexOf(item.id) > -1)
    .map((item) => ({
      ...item,
      children: item.children ? filter(item.children, matchedIDS) : [],
    }));
}

function search(term) {
  // We wrap data in an object to match the node shape
  const dataNode = {
    children: data,
  };

  const matchedIDS = [];
  // find all items IDs that matches our search (or their children does)
  dfs(dataNode, term, matchedIDS);

  // filter the original data so that only matching items (and their fathers if they have) are returned
  return filter(data, matchedIDS);
}

TreeView中的React.js搜索过滤器

1 个答案: