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 。 打开已经打开弹出窗口的页面。