我正在嘗試根據條件顯示 3 種不同的樣式，但我無法使用三元運算式來實作。我在這里找到了一些解決方案，但仍然遇到了一些問題。
以下條件是我想要做的：
<div className={styles.extraContainer}>
{
(() => {
if (!opened && !followed )
<div id={styles.themeBox}><p> 10</p></div> //show this box
else if (opened && !followed)
<img src={arrowDownIcon} alt="不要嵌套三元運算式 - 基于 coditions 在 3 種樣式之間進行更改的方法" style={{height:'1.2em',
marginLRight:'10px', width:'auto', objectFit:'contain'}} /> //show this icon
else
"" //show nothing
})()
}
</div>
因為當我嘗試以下代碼時，我收到了不要嵌套三元運算式。錯誤。
{!opened && !followed ? <div id={styles.themeBox}><p> 10</p></div> : (opened && !followed ? <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> : ""}
uj5u.com熱心網友回復：
我認為最好的可讀解決方案是這樣的：
<div className={styles.extraContainer}>
{!opened && !followed &&
<div id={styles.themeBox}><p> 10</p></div> //show this box
}
{opened && !followed &&
<img src={arrowDownIcon} alt="" style={{height:'1.2em',
marginLRight:'10px', width:'auto', objectFit:'contain'}} /> //show this icon
}
</div>
或者您可以嵌套條件：
<div className={styles.extraContainer}>
{!followed && <>
{!opened &&
<div id={styles.themeBox}><p> 10</p></div> //show this box
}
{opened &&
<img src={arrowDownIcon} alt="" style={{height:'1.2em',
marginLRight:'10px', width:'auto', objectFit:'contain'}} /> //show this icon
}
</>}
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/341038.html
標籤：javascript 反应 jsx