React-多個className的三元表達式寫法

一、寫法一 ?🏻

1、舉例

實現多個className中，里面有一個固定className：medal_name和一個動態className：noMedal_name（用三元表達式判斷是否顯示該類名）。

2、代碼 ??

~ 寫法共有三種，下面是其中一種，另外兩種在文章末進行補充，請往下看喲~??

<div className={'medal_name' + ' ' + (!item.getMedal?'noMedal_name': '')}>勛章名稱</div>

3、代碼解析

!item.getMedal?'noMedal_name': ''的意思是：如果不存在item.getMedal，就顯示類名noMedal_name；否則，不顯示。

4、代碼注意點

?注意點1、

?注意點2：

三元表達式要記得加個小括號喲

【補充】 —— 代碼的另外兩種寫法：

第一種、在固定類名medal_name后面加個空格

<div className={'medal_name ' + (!item.getMedal?'noMedal_name': '')}>勛章名稱</div>

第二種、在動態類名noMedal_name前面加個空格

<div className={'medal_name' + (!item.getMedal?' noMedal_name': '')}>勛章名稱</div>

二、寫法二 ?🏻

使用模板字符串``

1、舉例

實現多個className中，里面有一個固定className：medal_name和一個動態className：noMedal_name（用三元表達式判斷是否顯示該類名：currentIndex等于index時就顯示，否則不顯示）。

2、代碼 ??

<div className={`medal_name ${currentIndex == index?'noMedal_name':''}`}></div>

總結

以上是生活随笔為你收集整理的2022-05-20 工作记录--React-多个className的三元表达式写法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。