在 React 中渲染多個條件三元運算符

Question

第一次嘗試這個所以請和我一起裸露。

我想根據三個條件之一返回一些元素。 目前該代碼適用於兩種情況：

<h1 id="largeh1">
   {isEnvironmentBFE
     ? outputEnFr(
       "BFE Environment English Text",
       "BFE Environment French Text",
       this.props.lang
       )
     : outputEnFr(
        "Acme Environment English Text",
       "Acme Environment French Text",
       this.props.lang
     )
    // Want third condition here
    }
</h1>

如果環境是“isEnvironmentBFE_OR_BFERENTAL”，我想再添加一個條件 - 所以當人們遇到第三個環境時，它會給他們不同的英語/法語值。 如果可能的話，想堅持使用三元運算符。

知道如何在這里添加第三個條件嗎？

Answer 1

<h1 id="largeh1">
   {
     isEnvironmentBFE
     ? (
         outputEnFr(
           "BFE Environment English Text",
           "BFE Environment French Text",
           this.props.lang
         )
     ) : NEW CONDITIONAL HERE
     ? (NEW RESULT)
     : (
         outputEnFr(
           "Acme Environment English Text",
           "Acme Environment French Text",
           this.props.lang
         )
     )
   }
</h1>

這相當於

if(isEnvironmentBFE)
  //yadda
else if (foo)
  //yadda yadda
else 
  //yadda

Answer 2

go 關於這一點的最易讀的方法是將該邏輯移出您的return語句並為其創建一個 function 來處理該邏輯。 您可以在同一個組件中執行此操作，或者如果 function 應該可以在另一個組件上重用，則將其提取到另一個文件中：

const Component = () => {

  const renderText = () => {
    if (...) {
      return ...
    } else if (...) {
      return ...
    }

    return ...
  }

  return (
    <h1>
      renderText();
    <h1>
  )
};

如果你想堅持使用三元組，你可以這樣做：

return condition1 ? (condition2 ? result1 : result2) : result3 

取決於您的個人喜好，盡管我建議對具有超過 1 個條件的任何內容使用if-statement或switch-statement ，因為它更容易閱讀和理解正在發生的事情。

Answer 3

三元用於生成簡潔的代碼，用於在兩個結果之間切換的簡單條件。 但我建議不要嵌套它。 有一個很好的 React 習慣用法在這里會更有意義：

<div>
  { condition1 && (<div>foo</div>)}
  { condition2 && (<div>bar</div>)}
  { condition3 && (<div>buz</div>)}
</div>