訪問 GrandParent 組件中的子組件

Question

我正在構建一個搜索算法可視化工具網站。

組件的順序是App->Row->Box

每個框組件都有自己唯一的 id (rowNumber-colNumber) 並將其類名設置為“Unvisited”

我在運行 BFS 的 App 組件中有一個 onclick 事件

為了可視化 Bfs，我必須訪問一些特定的（基於它們的 id）Box 組件的類名並將其更改為“Visited”

我怎樣才能實現它？

這些是我的組件

//APP COMPONENT

import React from "react"
import Row from "./Row"
export const Start = {row:14,col: 18},End = {row:14,col: 35}
export default function App(){
          const [grid,setGrid] = React.useState([])
          React.useEffect(() => {
             for(let i = 1;i<29;i++){
                 setGrid(prevArray =>prevArray.concat(<Row key = {i} row = {i}/>))
             }
          },[])
          return (
                 <>
                    <div className = "Navbar">
                        <a  href ="#" onClick = {Bfs}>Breadth First Search</a>
                    </div>
                    {grid}
                 </>
          )
}

//ROW COMPONENT 

import React from "react"
import Box from "./Box"
import {Start,End} from "./App"
export default function Row(props){
          const row = [];
          for(let colNumber = 1;colNumber<54;colNumber++){
                    row.push(<Box  
                        key = {colNumber}
                        row = {props.row}
                        col = {colNumber}
                        isStart = {props.row == Start.row && colNumber == Start.col}
                        isEnd = {props.row == End.row && colNumber == End.col}
                    />)
          }
          return (
                    <div className ="row">
                              {row}
                    </div>
          )
}

//BOX COMPONENT
 
import React from "react";
export default function Box({ row, col, isStart, isEnd }) {
  return (
           <div className="Unvisited" id={`${row}-${col}`}>
                {isStart && <img src="./images/start.png"></img>}
                {isEnd && <img src="./images/target.png"></img>}
          </div>
  )
}

Answer 1

在 App 組件中； const 網格 = []

由於您將網格用作變量，因此反應不關心網格是否發生變化； 你必須使用 useState hook const [grid, setGrid] = useState([])

並使用 setGrid 你必須更新網格的值。

使用 setGrid 更改網格后，React 將自動重新渲染組件。

每當您需要更新頁面上的某些數據時，您需要在反應中使用 state