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

2024年5月10日 269次阅读 来源: sin77

写在前面
这个系列的文章没有提供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}

完成！

    原文作者：sin77
    原文地址: https://segmentfault.com/a/1190000015475506
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞