写在前面

这个系列的文章没有提供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?  A. {item.question_answer.answer1}：null}

很明显你的三目运算并不会发挥作用。

下面教大家两种实现方式：

• 方式一：将b内的内容用数组的形式展现，贴上代码

{item.question_answer.answer1? [ (), ( A. {item.question_answer.answer1}) ] : null}

用 [ ( ) , ( ) , ( ) ] 的数组形式展现b的内容

• 方式二：用<div>包起其他的内容，贴上代码

{item.question_answer.answer1?  
    
  
       
       
       
      A. {item.question_answer.answer1}  
    
  : null}

完成！