无法在React组件渲染中编译三元表达式

Question

我注意到在编写React组件时，我的三元表达式可能会破坏30-40％的时间。我不确定他们是否可以进入某个特定的地方或正在发生的事情，因为语法看起来对我有效。错误消息要么没有帮助，要么我只是遗漏了一些明显的东西。

错误 组件

class AuthContainer extends Component {
  render() {
    const {  errorMessage, handleLogin, handleLogout, isAuthenticated } = this.props
    return (
      { isAuthenticated
        ? <Logout onLogoutClick={() => handleLogout()} />
        : <Login
            errorMessage={errorMessage}
            onLoginClick={(e) => handleLogin(e)}
          />
      }
    )
  }
}

isAuthenticated是一个布尔

Answer 1

您不需要在该场景中使用{ ... }，因为您不在JSX表达式中。

class AuthContainer extends Component {
  render() {
    const {  errorMessage, handleLogin, handleLogout, isAuthenticated } = this.props
    return (
      isAuthenticated
        ? <Logout onLogoutClick={() => handleLogout()} />
        : <Login
            errorMessage={errorMessage}
            onLoginClick={(e) => handleLogin(e)}
          />
    )
  }
}

Answer 2

由于JSX和JS的混淆，这种情况发生了很多。这就是我的方式。我总是把我的逻辑放在回报之外。尝试这样的事情：

class AuthContainer extends Component {
  render() {
    const {  errorMessage, handleLogin, handleLogout, isAuthenticated } = this.props
    const Button = (isAuthenticated)?<Logout onLogoutClick={() => handleLogout()} />:<Login
            errorMessage={errorMessage}
            onLoginClick={(e) => handleLogin(e)}
          />
    return (
      {Button}
    )
  }
}