如何使用 React (JSX) 編寫 else if 結構 - 三元不夠表達

Question

我想在反應中寫出等價物：

if (this.props.conditionA) {
    <span>Condition A</span>
} else if (this.props.conditionB) {
    <span>Condition B</span>
} else {
    <span>Neither</span>
}

所以也許

render() {
    return (<div>
        {(function(){
            if (this.props.conditionA) {
                return <span>Condition A</span>
            } else if (this.props.conditionB) {
                return <span>Condition B</span>
            } else {
                return <span>Neither</span>
            }
        }).call(this)}
    </div>)
}

但這似乎過於復雜。 有更好的方法嗎？

Answer 1

為什么說三元不夠表達？

render() {
  return <span>
    {this.props.conditionA ? "Condition A" 
      : this.props.conditionB ? "Condition B" 
      : "Neither"}
  </span>;
}

Answer 2

如果您不需要<div> ，只需返回<span>元素：

render() {
  if (this.props.conditionA) {
    return <span>Condition A</span>;
  } else if (this.props.conditionB) {
    return <span>Condition B</span>;
  } else {
    return <span>Neither</span>;
  }
}

您甚至可以將最后一個return語句移出else塊。

---

通常，您不必將所有內容都嵌入 JSX 中。 預先計算值完全沒問題，就像您在其他地方所做的一樣：

render() {
  let content;
  if (this.props.conditionA) {
    content = <span>Condition A</span>;
  } else if (this.props.conditionB) {
    content = <span>Condition B</span>;
  } else {
    content = <span>Neither</span>;
  }

  return <div>{content}</div>;
}

每當您需要/想要使用語句時，您都必須這樣做。

Answer 3

計算值，綁定到一個變量，然后輸出更好。 如果您確實需要復雜的內聯邏輯，則可以使用&&和|| ：

render() {
    return (<div>
        {
          this.props.conditionA && <span>Condition A</span>
          || this.props.conditionB && <span>Condition B</span>
          || <span>Neither</span>
        }
    </div>)
}

編輯：

正如其他人指出的那樣，您還可以刪除該包裝 div 並仍然使用這種方法：

render() {
  return (
    this.props.conditionA && <span>Condition A</span>
    || this.props.conditionB && <span>Condition B</span>
    || <span>Neither</span>
  );
}

Answer 4

如果你的條件和你表達的一樣簡單，我想你仍然可以像上面提到的@SkinnyJ一樣使用三元。 它非常優雅，但如果有很多這些條件需要檢查，我會擔心。 還有另一種方法可以解決這個問題：使用 switch 語句。

const props = {
  conditionA: "this is condition a"
};

let value;

switch (Object.keys(props)[0]) {
  case "conditionA":
    value = "Condition A";
    break;
  case "conditionB":
    value = "Condition B";
    break;
  default:
    value = "Neither";
}

console.log(value);

這里有幾個假設。 該對象不為空並且它只有一個屬性。

但如果這些都是真的，對於這樣的場景，switch 可能會更高效。 這可能對您感興趣：

Javascript switch vs if else

Answer 5

如果任何人仍然面臨此問題，請在您的eslintrc.js文件中粘貼以下行。

"no-nested-ternary" : "off" 

這將允許您開始在 jsx 代碼中使用嵌套的三元。

Answer 6

確實，這不是辦法。

var element;
if (this.props.conditionA) {
    element = (<span>Condition A</span>)
} else if (this.props.conditionB) {
    element = (<span>Condition B</span>)
} else {
    element = (<span>Neither</span>)
} 
...
    {element}