如何使用 React (JSX) 编写 else if 结构 - 三元的表达力不够答案

【问题标题】：How can I write an else if structure using React (JSX) - the ternary is not expressive enough如何使用 React (JSX) 编写 else if 结构 - 三元的表达力不够
【发布时间】：2016-12-13 03:28:27
【问题描述】：

我想在 react 中写一个等价的：

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>)
}

但这似乎过于复杂。有没有更好的办法？

【问题讨论】：

你真的想要一个围绕 span 的包装 div 吗？
@FelixKling 这意味着代表更复杂的东西，但没有 div 不是完全必要的

标签： javascript reactjs jsx

【解决方案1】：

如果还有人遇到此问题，请在您的eslintrc.js 文件中粘贴以下行。

"no-nested-ternary" : "off"

这将允许您开始在 jsx 代码中使用嵌套三元。

【讨论】：

【解决方案2】：

如果你的情况和你表达的一样简单，我认为你仍然可以像上面提到的@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

【讨论】：

【解决方案3】：

为什么说三进制表达力不够？

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

【讨论】：

是的，很好，这实际上很整洁。我使用了三元表达式（在 jsx 中），但开始觉得它很麻烦，也许我需要一个更好的例子才能解释原因。
这是一种不好的做法，嵌套三元运算符很快就会变得不可读：eslint.org/docs/rules/no-nested-ternary
@SherloxFR 这值得商榷github.com/eslint/eslint/issues/3480#issuecomment-189960121
@YosefWeiner 我认为实际上最好用三元（或只是 &&）制作两个 {} 块，即使有些人无法找到解决方法，这是可能的，而且从更易读的角度来看，代码的可读性是没有争议的，即使我理解有些人很难找到这个 eslint 规则的解决方案。
感谢@Yosef Weiner，为我节省了数小时的头痛：D 漂亮的三元代码；）

【解决方案4】：

计算值，绑定到变量，然后再输出更好。如果你确实想要复杂的内联逻辑，你可以使用&& 和||：

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>
  );
}

【讨论】：

我喜欢这个 - 对于某些组件，最好将它们全部放在“你面前”，而不是引用其他变量和/或组件。我听到你在说什么，但要小心认知开销。

【解决方案5】：

如果您不需要<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>;
}

当您需要/想要使用语句时，您必须这样做。

【讨论】：

我喜欢 let content 方法，&& 和三元表达式只是有点难以阅读

【解决方案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}

【讨论】：