亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在每次單擊 .map 項目列表中的每個項目時呈現不同的數據?

如何在每次單擊 .map 項目列表中的每個項目時呈現不同的數據?

富國滬深 2023-03-18 14:52:52
這個問題本身就很混亂,但我想要實現的是我在數據庫中有三個餐廳數據,我通過在餐廳名稱列表上調用 .map 方法在三張卡片上顯示他們的名字,現在我想做一些類似的事情每當有人點擊一張卡片時,他都會被帶到一個頁面,在那里他可以找到關于該特定餐廳的所有信息,它的菜肴應該能夠對它們進行評分,那么這個路由是如何發生的?我是否應該創建三個單獨的頁面,但如果我有三個以上的頁面會變得一團糟怎么辦?或者有一種方法可以在單擊不同的卡片時動態顯示不同的數據?供您參考,我在這個項目中使用 MERN Stack。
查看完整描述

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 />

    }

  }

注意:如果您想將詳細信息頁面顯示為彈出窗口或卡片下方,上述方法很有用,如果您想路由到新頁面,則可以進行條件路由,但是創建單個組件的想法仍然相同并向其傳遞適當的道具。


查看完整回答
反對 回復 2023-03-18
  • 1 回答
  • 0 關注
  • 115 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號