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

Question

我对提议的 JavaScript do expression construct 有疑问。有许多示例显示它如何用于 return 来自同时具有 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

所述

do expression is a stage 1 proposal, not part of 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.

的更多详细信息

Answer 3

这是 Babel 的作用：

输入：

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

输出：

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

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

Answer 4

是的，不使用 else 编写 do 表达式 是一种有效的语法，它将 return 和 undefined (void 0 ).

let a = do {
  if (false) true
}

// a === undefined

我们也可以在末尾 return 一个值，甚至不用像这样使用 else：

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

// a === null

特别是对于 ReactJS，我们必须 return a null 即使使用 do 表达式 ，因为如果它没有 return 东西，return 值将是 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 expression 因为我们可以使用 Conditional (ternary) operator ?:, and the answer is that using the ternary operator when we'll have more than one condition won't be syntactical friendly and it will lead in miss-renders and 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>
  );
}

Answer 5

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

    {condition && jsx-element}

示例：

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

只要此 relationshipStatus 取 RelationshipStatus.SINGLE 的值，它就会渲染此 ShowIAmSingleComponent 组件。

反应简单。

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

JavaScript do expression: if statement without else

javascript

jsx

reactjs

ecmascript-next