在javascript中将三元操作分解为if、else

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

<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中写下这篇文章（只是为了理解）。我知道这里的条件是不可理解的，但我只是想让它在其他情况下得到一个清晰的理解 谢谢

让currentIndex=1；
设指数=2；
让问题={
对,，
评论：错，
所选答案：空
}
让输出=“”；
如果（currentIndex==索引）{
输出='问题框bg红色框'
}else if（问题，已访问）{
如果（问题审查）{
输出=“问题框回顾框”
}else if（question.selected_answer==null）{
输出=“问题框白框”
}否则{
输出=“问题框橙色框”
}
}否则{
输出=“问题框”
}
console.log（输出）

让currentIndex=1；
设指数=2；
让问题={
对,，
评论：错，
所选答案：空
}
让输出=“”；
如果（currentIndex==索引）{
输出='问题框bg红色框'
}else if（问题，已访问）{
如果（问题审查）{
输出=“问题框回顾框”
}else if（question.selected_answer==null）{
输出=“问题框白框”
}否则{
输出=“问题框橙色框”
}
}否则{
输出=“问题框”
}
console.log（输出）

直接翻译成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-temp；
if（this.state.currentIndex==索引）{
temp=“问题框bg红色框”
}否则{
如果（问题.访问）{
如果（问题审查）{
temp=“问题框回顾框”；
}否则{
if（question.selected_answer==null）{
temp=“问题框-白色框”
}否则{
temp=“问题框橙色框”
}
}
}否则{
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}`} />

let highlight=''；
if（this.state.currentIndex==索引）{
highlight=“bg红色框”；
}else if（question.visted&&question.review）{
突出显示=“查看框”；
}else if（question.visted&&question.selected_-answer==null）{
突出显示=“白框”；
}else if（问题，已访问）{
突出显示=“橙色框”；
}
// ...

直接翻译成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-temp；
if（this.state.currentIndex==索引）{
temp=“问题框bg红色框”
}否则{
如果（问题.访问）{
如果（问题审查）{
temp=“问题框回顾框”；
}否则{
if（question.selected_answer==null）{
temp=“问题框-白色框”
}否则{
temp=“问题框橙色框”
}
}
}否则{
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}`} />

let highlight=''；
if（this.state.currentIndex==索引）{
highlight=“bg红色框”；
}else if（question.visted&&question.review）{
突出显示=“查看框”；
}else if（question.visted&&question.selected_-answer==null）{
突出显示=“白框”；
}else if（问题，已访问）{
突出显示=“橙色框”；
}
// ...

代码已更新…代码已更新。。。