Javascript 这里只有三元运算符起作用

我是一个反应的初学者。我刚刚尝试了以下代码：

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

类联系人扩展了React.Component{
render（）{
返回(
{ 
如果（本州授权）{
“联系人”
}否则{
'输入密码'
} 
}     
)
}
}

正如您在上面的代码中所看到的，我在一对大括号{}之间放了一个JS if else代码，因为我是在上面读的 那

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

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

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

{this.state.authorized？'Contact'：'输入密码'}

---

它起作用了！在某些情况下，我只能使用三元运算符，而不能使用通常的JS if else语句？

如果else在JSX中不起作用，根据语言规范：

如果else在JSX中不起作用，根据语言规范：

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

---

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

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

---

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

如果您真的想这样做，可以使用

以下是一个例子：

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

类联系人扩展了React.Component{
render（）{
返回(
{ 
(() => {
如果（本州授权）{
返回“联系人”
}否则{
返回“输入密码”
} 
})()
}     
)
}
}

---

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

{someVar}

如果确实要这样做，可以使用

以下是一个例子：

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

类联系人扩展了React.Component{
render（）{
返回(
{ 
(() => {
如果（本州授权）{
返回“联系人”
}否则{
返回“输入密码”
} 
})()
}     
)
}
}

---

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

{someVar}

或者更准确地说，表达式的计算结果是值。或者更准确地说，表达式的计算结果是值。