Question

我是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语句吗？

Answer 1

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

表达式和语句之间的重要区别是表达式返回值。

Answer 2

根据语言规范：https://react-cn.github.io/react/tips/if-else-in-JSX.html

，If-else在JSX中不起作用

Answer 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 }的结构将其添加。

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

3 个答案: