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

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

React 條件渲染映射數組

React 條件渲染映射數組

萬千封印 2023-07-20 16:18:55
我在這個codesandbox中重現了我的場景我有一個包含 5 個元素的標簽數組const tagsList = ["Covid 19", "Business", "Energy", "Sport", "Politics"];我正在為我的Chip組件的每個標簽進行映射  {tagsList.map((tag) => (    <Chip label={tag} />  ))}我想說的是,如果標簽列表長度大于2(這是我在codesandbox中的情況),則向我顯示帶有剩余標簽的芯片,即3(長度-2)。我怎樣才能在同一個地圖功能中制作?還有其他辦法嗎?
查看完整描述

3 回答

?
慕娘9325324

TA貢獻1783條經驗 獲得超4個贊

tagsList.slice(2)如果列表大小大于 2,則可以使用。


export default function OutlinedChips() {

  const classes = useStyles();


  const tagsList = ["Covid 19", "Business","Energy", "Sport", "Politics"];


  return (

    <div className={classes.root}>

      {(tagsList.length > 2 ? tagsList.slice(2) : tagsList).map((tag) => (

        <Chip label={tag} />

      ))}

    </div>

  );

}

工作代碼 - https://codesandbox.io/s/material-demo-forked-31f2w?file=/demo.js


查看完整回答
反對 回復 2023-07-20
?
郎朗坤

TA貢獻1921條經驗 獲得超9個贊

如果你不介意不從位置 0 開始,你可以這樣做:


<div className={classes.root}>

      {(tagsList.length > 2 ? tagsList.slice(3, 5) : tagsList).map((tag) => (

        <Chip label={tag} />

      ))}

      {tagsList.length > 2 && <Chip label={tagsList.length - 2} /> }

</div>


查看完整回答
反對 回復 2023-07-20
?
至尊寶的傳說

TA貢獻1789條經驗 獲得超10個贊

您可以在映射函數中收集索引(列表中元素的位置)并根據您的需要進行操作,如果我理解正確的話,您可以執行以下操作:


return (

    <div className={classes.root}>

      {/* Change to shortTagsList for check the shortest */}

      {tagsList.map((tag, index) => {

        let length = tagsList.length;

        console.log(length);

        return (

          (length > 2 && index > 2 && <Chip label={tag} />) ||

          (length <= 2 && <Chip label={tag} />)

        );

      })}

    </div>

  );

代碼沙盒


查看完整回答
反對 回復 2023-07-20
  • 3 回答
  • 0 關注
  • 188 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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