JavaScript do 表达式：没有 else 的 if 语句答案

【问题标题】：JavaScript do expression: if statement without elseJavaScript do 表达式：没有 else 的 if 语句
【发布时间】：2018-01-21 20:51:33
【问题描述】：

我对提议的JavaScript do expression construct 有疑问。有许多示例展示了如何使用它从同时具有if 和else 的条件语句中返回一个值。也适用于 if 与 else if 和 else。

只有if 子句但没有else if 或else 的条件呢？这是do 表达式的有效用法吗？

我的用例是在 React 组件中有条件地显示内容。我想这样写 JSX 代码，但我不确定它是否有效：

export default function myComponent(props) {
  return (
    <div>
      {do {
        if (true) {
          <p>If statement is true</p>
        }
      }}
      <p>I am always rendered</p>
    </div>
  );
}

我也在this gist问了这个问题。

【问题讨论】：

do 表达式是阶段 1 提案，不是 ES2016 (ES7) 的一部分。

标签： javascript reactjs jsx ecmascript-next

【解决方案1】：

为什么不简单地这样做呢？使用三元运算符

export default function myComponent(props) {
  return (
    <div>
      { true ? <p>If statement is true</p> : null }
      <p>I am always rendered</p>
    </div>
  );
}

【讨论】：

【解决方案2】：

不确定do，也如@Felix Kling所述

do 表达式是第 1 阶段的提案，不是 ES2016 (ES7) 的一部分。

您可以使用 ternary operator 来编写它，如果条件失败，则使用 return null：

export default function myComponent(props) {
    return (
        <div>
            {
                true?
                    <p>If statement is true</p>
                :null
            }
            <p>I am always rendered</p>
        </div>
    );
}

或使用&& Operator：

export default function myComponent(props) {
    return (
        <div>
            {
                true && <p>If statement is true</p>
            }
            <p>I am always rendered</p>
        </div>
    );
}

查看文档以了解有关 Conditional Rendering 的更多详细信息。

【讨论】：

&& 运算符正是我想要的。它使代码更简洁。

【解决方案3】：

这是 Babel 的作用：

输入：

<p>
  {do {
    if (true) {
      <a/>
    }
  }}
</p>

输出：

React.createElement(
  "p",
  null,
  true ? React.createElement("a", null) : void 0
);

这对我来说很有意义。隐含的else 中的返回值将是undefined。

【讨论】：

【解决方案4】：

是的，在没有 else 的情况下编写 do 表达式 是一种有效的语法，它将返回 undefined (void 0)。

let a = do {
  if (false) true
}

// a === undefined

我们也可以在不使用 else 的情况下返回一个值，如下所示：

let a = do {
  if (false) true
  null
}

// a === null

特别是对于ReactJS，我们必须返回一个null，即使使用do 表达式，因为如果它没有返回任何东西，返回值将是@ 987654330@当然会出错破坏组件渲染：

export default function myComponent(props) {
  return (
    <div>
      {do {
        if ([condition]) {
          <p>If statement is true</p>
        }
        null
      }}
      <p>I am always rendered</p>
    </div>
  );
}

或者，使用Nullish coalescing operator ??，它也会捕获undefined：

export default function myComponent(props) {
  return (
    <div>
      {do {
        if ([condition]) {
          <p>If statement is true</p>
        }
      } ?? null}
      <p>I am always rendered</p>
    </div>
  );
}

这里的其他答案表明为什么要使用 do 表达式，因为我们可以使用 Conditional (ternary) operator ?: 来做到这一点，答案是当我们将使用 三元运算符有多个条件不会是语法友好的，它会导致错误渲染和hard time understanding the logic for developers：

export default function myComponent(props) {
  return (
    <div>
      {[condition1]
        ? <p>If condition1 is true</p> :
       [condition2]
        ? <p>If condition2 is true</p> :
       [condition2]
        ? <p>If condition3 is true</p> :
       [condition4]
        ? <p>If condition4 is true</p> :
        null
      }
      <p>I am always rendered</p>
    </div>
  );
}

这也是 do 表达式提出和存在的原因之一；它将使多个条件表达式语法友好：

export default function myComponent(props) {
  return (
    <div>
      {do {
        if ([condition1]) <p>If condition1 is true</p>
        if ([condition2]) <p>If condition2 is true</p>
        if ([condition3]) <p>If condition3 is true</p>
        if ([condition4]) <p>If condition4 is true</p>
      } ?? null}
      <p>I am always rendered</p>
    </div>
  );
}

【讨论】：

【解决方案5】：

您可以使用条件渲染简单地做到这一点：

    {condition && jsx-element}

例子：

    {relationshipStatus===RelationshipStatus.SINGLE && <ShowIAmSingleComponent />}

只要这个relationshipStatus 的值为RelationshipStatus.SINGLE，它就会渲染这个ShowIAmSingleComponent 组件。

像反应一样简单。

【讨论】：