React-多個(gè)className的三元表達(dá)式寫(xiě)法

一、寫(xiě)法一 ?🏻

1、舉例

實(shí)現(xiàn)多個(gè)className中，里面有一個(gè)固定className：medal_name和一個(gè)動(dòng)態(tài)className：noMedal_name（用三元表達(dá)式判斷是否顯示該類(lèi)名）。

2、代碼 ??

~ 寫(xiě)法共有三種，下面是其中一種，另外兩種在文章末進(jìn)行補(bǔ)充，請(qǐng)往下看喲~??

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

3、代碼解析

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

4、代碼注意點(diǎn)

?注意點(diǎn)1、

?注意點(diǎn)2：

三元表達(dá)式要記得加個(gè)小括號(hào)喲

【補(bǔ)充】 —— 代碼的另外兩種寫(xiě)法：

第一種、在固定類(lèi)名medal_name后面加個(gè)空格

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

第二種、在動(dòng)態(tài)類(lèi)名noMedal_name前面加個(gè)空格

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

二、寫(xiě)法二 ?🏻

使用模板字符串``

1、舉例

實(shí)現(xiàn)多個(gè)className中，里面有一個(gè)固定className：medal_name和一個(gè)動(dòng)態(tài)className：noMedal_name（用三元表達(dá)式判斷是否顯示該類(lèi)名：currentIndex等于index時(shí)就顯示，否則不顯示）。

2、代碼 ??

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。