如果没有模板字符串且没有条件（三元）运算符，但带有if-else，此React代码的外观如何？

Question

How would this React code look like without a template string and without a conditional (ternary) operator, but with if-else?" I read the documentation, but I want to visually see the example on my code, and not on someone else's code.

<button className={`tablinks ${i === active ? 'active' : ''}`}
            onClick={openTab}
            data-index={i}
>{n.title}</button>

Answer 1

Well you can could define the if-else logic outside the markup. You would define it in the .map() , before returning the markup. Makes it cleaner.

.map(i){
   ...
   let classes = "tablinks"
   if(i === active){
      classes = classes + " active"
   }

   return(
       <button 
           className={classes}
           onClick={openTab}
           data-index={i}
        >
         {n.title}
      </button>
   )
}

Answer 2

The inside of the JSX {} s needs to be an expression, and if / else alone cannot be used in an expression context - you'll need an IIFE (or a separate named function that you invoke, or a variable name defined beforehand) instead:

<button
  className={
    (() => {
      if (i === active) {
        return 'tablinks active';
      } else {
        return 'tablinks';
      }
    })()
  }
  onClick={openTab}
  data-index={i}
>{n.title}</button>

It's a lot uglier, and introduces a lot of syntax noise. I wouldn't recommend it.

The conditional operator here is pretty helpful, but the template literal isn't as useful - if you wanted to just remove the template literal, it would look like

<button
  className={'tablinks ' + (i === active ? 'active' : '')`}
  onClick={openTab}
  data-index={i}
>{n.title}</button>