如何解决三元运算符与多个？和：的在反应

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>