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

Question

我有一个关于提出的JavaScript do表达式结构的问题。有许多示例显示它如何用于从具有if和else的条件语句中返回值。也适用于带有else if和else的if。

那么，仅具有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>
  );
}

我也在这篇Gist里提出了同样的问题。

- ecbrodie

---

do 表达式是 ES2016（ES7）的阶段1 提案，并不是其一部分。 - Felix Kling

Answer 1

关于do，不确定，如@Felix Kling所提到的那样，

do表达式是ES2016（ES7）的一个1阶段提案。

---

您可以使用三元运算符这样编写它，并且如果条件失败，则return null:

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

或者使用&&运算符：

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

查看DOC以获取有关条件渲染的更多详细信息。

- Mayank Shukla

---

“&&” 运算符正是我所寻找的。它使代码更加简洁和精炼。 - andromeda

Answer 2

为什么不直接使用三元运算符来实现呢？

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

- Kush Patel

Answer 3

以下是Babel的功能：

输入：

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

输出：

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

我理解这个。隐式的 else 返回值将是 undefined。

- Joe Frambach

---

在React中，你希望else语句的返回值（在这种情况下）是null，而不是undefined。最好像这个答案中明确地返回null。 - Matt Browne

然后在 Babel 上开一个工单。我并没有在我的回答中编写这段代码，我只是展示了编译器的操作。 - Joe Frambach

我在谈论Babel转译之前的原始源代码。所以{do { if (true) { <a/> } null }} - Matt Browne

...或者在当前版本的规范中，你需要有一个显式的 "else" 块 (else { null })；不确定 Babel 是否支持这个。 - Matt Browne

Answer 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，即使使用do expression，我们也必须返回null，因为如果不返回任何内容，返回值将会是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>
  );
}

或者，使用空值合并运算符??，它也可以捕获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表达式，因为我们可以使用条件（三元）运算符？：来完成此操作，答案是，当我们有多个条件时，使用三元运算符不会很友好，并且会导致渲染错误和开发人员难以理解逻辑：

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

- Christos Lytras

---

在最新版本的do表达式提案中，似乎这不再是真实的情况了，明确地写出else也更易读。但是，这个答案很好地解释了为什么要使用do表达式。 - Matt Browne

Answer 5

您可以简单地使用条件渲染来完成，如下所示：

    {condition && jsx-element}

例子：

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

无论何时，当这个relationshipStatus的值为RelationshipStatus.SINGLE时，它就会渲染这个ShowIAmSingleComponent组件。

简单易懂，就像React一样。

- Maifee Ul Asad