1 回答

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超7個贊
不,您不必創(chuàng)建單獨(dú)的頁面,您只需要創(chuàng)建一個 detailsPage 組件并傳遞包含您單擊的卡詳細(xì)信息(餐廳)的所需道具。
所以基本上你將首先在你的組件中初始化一個本地狀態(tài)對象,它顯示這樣的卡片:
this.state = {
restaurantName : '',
restuarantId: '',
showDetails: false,
}
然后將卡片上的點(diǎn)擊處理程序綁定到某個函數(shù),例如:
const onCardClick = (id,name) => {
this.setState({
showDetails: true,
restuarantName: name,
restaurantId: id
})
}
現(xiàn)在在您的渲染方法中,只需使用 if 條件渲染您的詳細(xì)信息組件,以便它僅在 showDetails 設(shè)置為 true 時(shí)顯示,并且它會收到適當(dāng)?shù)?ID 和名稱
return(){
.....
// your previous code
.....
{
this.state.showDetails &&
<DetailsPage id=this.state.id name=this.state.name />
}
}
注意:如果您想將詳細(xì)信息頁面顯示為彈出窗口或卡片下方,上述方法很有用,如果您想路由到新頁面,則可以進(jìn)行條件路由,但是創(chuàng)建單個組件的想法仍然相同并向其傳遞適當(dāng)?shù)牡谰摺?/p>
添加回答
舉報(bào)