不要嵌套三元表達式 - 基於 coditions 在 3 種樣式之間進行更改的方法

Question

我正在嘗試根據條件顯示 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="" 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'}} /> : ""}

Answer 1

我認為最好的可讀解決方案是這樣的：

<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>