Reactjs 在React组件渲染中编译三元表达式失败

我注意到，在编写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)}
          />
      }
    )
  }
}

类AuthContainer扩展组件{ render（）{ const{errorMessage，handleLogin，handleLogout，isAuthenticated}=this.props 返回( {未经验证 ？handleLogout（）}/> ：handleLogin（e）} /> } ) } }

---

isAuthenticated

是一个bool

您不需要在该场景中使用

{…}

，因为您不在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)}
          />
    )
  }
}

类AuthContainer扩展组件{ render（）{ const{errorMessage，handleLogin，handleLogout，isAuthenticated}=this.props 返回( 认证 ？handleLogout（）}/> ：handleLogin（e）} /> ) } }

---

您不需要在该场景中使用

{…}

，因为您不在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)}
          />
    )
  }
}

类AuthContainer扩展组件{ render（）{ const{errorMessage，handleLogin，handleLogout，isAuthenticated}=this.props 返回( 认证 ？handleLogout（）}/> ：handleLogin（e）} /> ) } }

---

由于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}
    )
  }
}

类AuthContainer扩展组件{ render（）{ const{errorMessage，handleLogin，handleLogout，isAuthenticated}=this.props 常量按钮=（已验证）？handleLogout（）}/>：handleLogin（e）} /> 返回( {按钮} ) } }

---

由于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}
    )
  }
}

类AuthContainer扩展组件{ render（）{ const{errorMessage，handleLogin，handleLogout，isAuthenticated}=this.props 常量按钮=（已验证）？handleLogout（）}/>：handleLogin（e）} /> 返回( {按钮} ) } }

---

ah。这就解释了为什么有时候它能工作，有时候它会像这样断裂。我需要更加注意上下文。删除

{

有效。谢谢！啊。这就解释了为什么有时它会工作，有时会像这样中断。我需要更加注意上下文。删除

{

有效。谢谢！很好，我非常喜欢这种方法。保持返回非常干净。我非常喜欢这种方法。保持返回非常干净