React踩坑之旅——三目運算符

寫在前面
這個系列的文章沒有提供react的系列用法，只提供了一些在實現細節方面的遇到問題的解決方法，因此在學習這個系列內容的時候，已經假定你有了一些react基礎。若是沒有，推薦學習react初學者教程

三目運算符簡介

它是惟一有3個操做數的運算符，因此有時又稱爲三元運算符。通常來講，三目運算符的結合性是右結合的。
對於條件表達式b ? x : y，先計算條件b，而後進行判斷。若是b的值爲true，計算x的值，運算結果爲x的值；不然，計算y的值，運算結果爲y的值。一個條件表達式毫不會既計算x，又計算y。條件運算符是右結合的，也就是說，從右向左分組計算。例如，a ? b : c ? d : e將按a ? b : (c ? d : e)執行。

執行過程：

if(a) {
return b;
} 
else {
return c;
}

react與三目運算符

在react中，當你在判斷以後的某一項不是一個單項構成的時候呢？

好比 a ? b : c 中的b由不少<div>構成，怎樣才能發揮三目運算符的功能呢？
若是你是這樣實現的：

{item.question_answer.answer1? 
<input type="radio" className = "circle" ></input>
<span className = "answer"> A. {item.question_answer.answer1}</span>
：null}

很明顯你的三目運算並不會發揮做用。

下面教你們兩種實現方式：

• 方式一：將b內的內容用數組的形式展示，貼上代碼

{item.question_answer.answer1? 
[
 (<input type="radio" className = "circle" ></input>),
 (<span className = "answer" > A. {item.question_answer.answer1}</span>)
 ]
 : null}

用 [ ( ) , ( ) , ( ) ] 的數組形式展示b的內容

• 方式二：用<div>包起其餘的內容，貼上代碼

{item.question_answer.answer1?
  <div  className = "mutilrWrapper" key = "index">
  <input type="checkbox" className = "circle" i ></input>
  <span className = "checkboxAnswer answerWrapper" ></span>
  <img src = {imgURL}  className = "selected" />
  <span className = "answer" id = "A"> A. {item.question_answer.answer1}</span>
  </div>
  : null}

完成！