如何解決三元運算符與多個？和：的在反應

Question

{ 
     this.props.favoriteButton ? 
     this.state.favorited ? 
      <div className="star">&#9733;</div> 
     : 
      <div 
      className="star" 
      onClick={() => this.favorite(recipe)} 
      > 
      &#9734; 
      </div> 
     : 
     <div></div> 
    } 

如果有多個？請問這個說法的工作......在這個相當混亂......

Answer 1

轉化爲簡單的IFS後：

if (this.props.favoriteButton) { 
    if (this.state.favorited) { 
     return <div className="star">&#9733;</div>; 
    } else { 
     return <div className="star" onClick={() => this.favorite(recipe)}>&#9734;</div>; 
    } 
} else { 
    return <div></div> 
} 

Answer 2

當第一個條件不符合，第二個條件也沒關係

const x = document.getElementById("x") 
 
const y = document.getElementById("y") 
 
const result = document.getElementById("result") 
 
x.addEventListener("change", showResult) 
 
y.addEventListener("change", showResult) 
 

 
function showResult() { 
 
    return result.textContent = 
 
    x.checked ? 
 
    y.checked ? 
 
     "x and y checked" 
 
     : "x checked, y unchecked" 
 
    : "x unchecked, y whatever" 
 
} 
 

 
showResult()

<input type="checkbox" id="x"/> 
 
<input type="checkbox" id="y"/> 
 
<p id="result"></p>