1 回答

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