只有三元运算符在这里工作答案

【问题标题】：Only ternary operator works here只有三元运算符在这里工作
【发布时间】：2019-01-29 08:38:57
【问题描述】：

我是 React 的初学者。我刚刚尝试了以下代码：

class Contact extends React.Component {
  render() {
    return (
      <div id="authorization">
        <h1>
          { 
            if (this.state.authorized) {
             'Contact'
            } else {
             'Enter the Password'
            } 
          }     
        </h1>
    )
  }
}

正如你在上面的代码中看到的，我在一对花括号 {} 之间放了一个 JS if-else 代码，因为我读过它 Introducing JSX那个

您可以将任何有效的 JavaScript 表达式放在 JSX 中的花括号内。

但是上面的代码不起作用。但是如果我用三元运算符替换它：

<h1>
  { this.state.authorized ? 'Contact' : 'Enter the Password' }
</h1>

有效！是不是在某些情况下我只能使用三元运算符而不能使用通常的 JS if-else 语句？

【问题讨论】：

标签： javascript reactjs if-statement ternary-operator

【解决方案1】：

三元表达式是一个表达式。 if 语句是一个语句。语句不是表达式。

表达式和语句之间的重要区别在于表达式返回一个值。

【讨论】：

或者，更准确地说，表达式计算为一个值。

【解决方案2】：

根据语言规范，如果-else 在 JSX 中不起作用：https://react-cn.github.io/react/tips/if-else-in-JSX.html

【讨论】：

【解决方案3】：

如果你真的要这样做，你可以使用IIFE

这是一个例子：

class Contact extends React.Component {
  render() {
    return (
      <div id="authorization">
        <h1>
        { 
          (() => {
            if (this.state.authorized) {
              return 'Contact'
            } else {
              return 'Enter the Password'
            } 
          })()
        }     
        </h1>
    )
  }
}

但这不是标准的，您最好在 return 语句之前创建一个变量并使用如下构造添加它：{ someVar }。

【讨论】：