onClick 后重定向到組件

Question

我正在使用一個簡單的 API 作為項目創建一個庇護所查找器 Web 應用程序，我正在繪制一系列庇護所並生成一個包含有關它的基本信息的ShelterCard ，我有一個想法，並且有很多關於庇護所的數據API 將保持未使用狀態，因此我想實現某種類型的onClick ，它會將您帶到一個更大的組件，其中包含有關特定庇護所的更多信息，我之前沒有這樣做過，所以我不確定如何實現此功能。 我的想法可能是在參數上使用類似避難所 id 的東西，然后將它與 ShelterProfile 一起使用以顯示完整信息。 到目前為止，當我點擊每張卡片時，我什至無法在console.log一些東西，所以我首先需要知道如何實現onClick 。 我正在使用 react-router 作為路由和 react-query 來獲取數據。 我對解決這個問題的任何不同想法持開放態度。

export const ShelterComponent = () => {
    const history = useHistory()
    console.log(history)
    async function fetchData() {
        const response = await fetch(SHELTER_URL)
        const data = await response.json()
        return data
    }
    const {status, data, error} = useQuery("shelter", fetchData)
    // const {features} = data
    if(status==="loading"){return <p>Loading </p>}
    if(error) return <p>something went worng...</p>
    if(data)
    return (
        <>         
     {data.features.map((shelter, i)=> {  
           return <ShelterCard key ={i} shelter={shelter}/>
       })}
    </>
    )
} 

Answer 1

您似乎想要實現 Netflix 主屏幕之類的功能。 當您單擊任何電影卡片時，會打開更大的彈出窗口，其中包含有關同一電影或系列的更多信息。

您可以這樣做，而不是將其重定向到另一個頁面。 保持一個 selectedShelterId 狀態並將其初始設置為“false”。

const [selectedShelterId,setSelectedShelterId]=useState(false)

將 onClick 添加到所有卡片，每當用戶單擊任何卡片時，將 selectedShelterId 設置為避難所卡片上的避難所 ID。

 {data.features.map((shelter, i)=> {  
       return (
              <div onClick={()=>setSelectedShelterId(shelter.id)}> 
                 <ShelterCard key ={i} shelter={shelter}/>
              </div>
              )
       })}

創建組件（例如 ShelterInfoPopup），您可以在其中將此 selectedShelterId 作為道具傳遞，並使用該 ID 進行 API 調用以根據需要獲取和顯示避難所信息。

並將這個 ShelterInfoPopup 組件固定在頁面頂部，它應該只在有 selectedShelterId 時打開。

{selectedShelterId && <ShelterInfoPopup shelterID={selectedShelterId}/>}

並在彈出窗口上添加一個十字或某種選項，可以關閉彈出窗口。 為此，您需要將 selectedShelterId 設置為 false。

您可以使用 useEffect 和 query params 使其更加動態並在查詢 params 中維護 selectedShelterId 。 打開已經打開彈出窗口的頁面。