在javascript中将三元运算中断为if和else

Question

嘿，伙计们，我很难理解多个三元条件。下面是我的代码

<div
            className={
              this.state.currentIndex == index
                ? "question-box bg-red-box"
                : question.visited
                ? question.review
                  ? "question-box review-box"
                  : question.selected_answer == null
                  ? "question-box white-box"
                  : "question-box orange-box"
                : "question-box"
            }
          >

我怎么才能在if else中写这个(只是为了理解)。我知道这里的条件不会不稳定，但我只是想要得到一个清晰的了解，谢谢！

Answer 1

直接转换为if/else的方法如下：

let temp;
if (this.state.currentIndex == index) {
  temp = "question-box bg-red-box"
} else {
  if (question.visited) {
    if (question.review) {
      temp = "question-box review-box";
    } else {
      if (question.selected_answer == null) {
        temp = "question-box white-box"
      } else {
        temp = "question-box orange-box"
      }
    }
  } else {
    temp = "question-box"
  }
}

// later:
<div className={temp} />

这两个版本的代码都不容易理解。我可能会做类似下面这样的事情：

let highlight = '';
if (this.state.currentIndex === index) {
  highlight = "bg-red-box";
} else if (question.visited && question.review) {
  highlight = "review-box";
} else if (question.visited && question.selected_answer === null) {
  highlight = "white-box";
} else if (question.visited) {
  highlight = "orange-box";
}

// ...
<div className={`question-box ${highlight}`} />

Answer 2

​

let currentIndex = 1;

let index = 2;

let question = {
    visited: true,
    review: false,
    selected_answer: null
}

let output = '';


if(currentIndex == index){
    output = 'question-box bg-red-box'
} else if (question.visited) {
    if(question.review){
        output =  "question-box review-box"
    } else if (question.selected_answer == null) {
        output =  "question-box white-box"
    } else {
        output =  "question-box orange-box"
    }
} else {
    output =  "question-box"
}

console.log(output)

​