리액트 트리 메뉴 검색 방법 질문

Question

질문:react-simple-tree-menu 를 사용해서 트리 메뉴를 출력 했는데요 검색 버튼을 이용해 검색어에 해당하는 계층까지 트리가 확장 되도록 하려면 어떻게 해야 할까요?프로젝트 실행 정보:아래 프로젝트 받기https://github.com/hyunsokstar/hyun-tree루트 폴더 만들기: git clone https://github.com/hyunsokstar/hyun-tree.git npm i npm audit fix --force npm start하시면 프로젝트가 실행 됩니다.디폴트 url 로 요청을 날리면 아래 처럼 출력 되는데요 dogapp.jsimport React, { useState } from "react"; import TreeMenu from "react-simple-tree-menu"; import "../../node_modules/react-simple-tree-menu/dist/main.css"; const treeData = [ { key: "mammal", label: "Mammal", url: "https://www.google.com/search?q=mammal", nodes: [ { key: "canidae", label: "Canidae", url: "https://www.google.com/search?q=canidae", nodes: [ { key: "dog", label: "Dog", url: "https://www.google.com/search?q=dog", nodes: [], }, { key: "fox", label: "Fox", url: "https://www.google.com/search?q=fox", nodes: [], }, { key: "wolf", label: "Wolf", url: "https://www.google.com/search?q=wolf", nodes: [], }, ], }, ], }, { key: "reptile", label: "Reptile", url: "https://www.google.com/search?q=reptile", nodes: [ { key: "squamata", label: "Squamata", url: "https://www.google.com/search?q=squamata", nodes: [ { key: "lizard", label: "Lizard", url: "https://www.google.com/search?q=lizard", }, { key: "snake", label: "Snake", url: "https://www.google.com/search?q=snake", }, { key: "gekko", label: "Gekko", url: "https://www.google.com/search?q=gekko", }, ], }, ], }, ]; function Tree() { const [search_word, setsearch_word] = useState(""); const inputHandelrForSearchWord = (e) => { let search_word = e.target.value; console.log(search_word); setsearch_word(search_word); }; const excute_search_for_tree = () => { console.log("검색 버튼 클릭"); // todo: 트리 메뉴에서 검색한 단어가 있는곳까지 열리게 만들기 }; return ( <>

); } export default Tree; ``` 라이브러리 docs:https://github.com/iannbing/react-simple-tree-menuhttps://codesandbox.io/examples/package/react-simple-tree-menu

리액트 트리 메뉴 검색 방법 질문

0개의 답변

Q&A 목록