第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

如何在每次單擊 .map 項(xiàng)目列表中的每個項(xiàng)目時(shí)呈現(xiàn)不同的數(shù)據(jù)?

如何在每次單擊 .map 項(xiàng)目列表中的每個項(xiàng)目時(shí)呈現(xiàn)不同的數(shù)據(jù)?

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

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>


查看完整回答
反對 回復(fù) 2023-03-18
  • 1 回答
  • 0 關(guān)注
  • 113 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號