Question

我对提议的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中提出了问题。

Answer 1

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

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

Answer 2

不确定do，也正如@ Felix Kling

所述

表达式是第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>
    );
}

查看DOC以获取有关 Conditional Rendering 的详细信息。

Answer 3

这是巴贝尔所做的：

输入：

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

输出：

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

这对我有意义。隐含else中的返回值为undefined。

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 表达式，我们也必须返回一个 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>
  );
}

或者，使用 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>
  );
}

JavaScript表达式：if语句没有else

4 个答案: