三元运算符在反应中无法正常工作

Question

所以我有一个名为 PrivateRoute.js 的组件，它基本上保护一些路由并在用户未登录时将用户重定向到登录页面，我想在三元运算符中显示一条警告消息，我的警报通过但几秒钟后我收到错误

私有路由

function PrivateRoute({ component: Component, ...rest }) {
    return ( 
      <Route
        {...rest}
        render={props =>
        /*If "IsLoggedIn" is located inside the local storage(user logged in), then render the component defined by PrivateRoute */
            localStorage.getItem("IsLoggedIn")  ? (
            <Component {...props} />
          ) : alert('You must be logged in to do that!') (  //else if there's no authenticated user, redirect the user to the signin route 
            <Redirect 
              to='/signin' 
            /> 
          ) 
        }
      />
    );
  }

这是我在反应中得到的错误：

如何在三元运算符中显示警告而不出现此错误？

Answer 1

JavaScript 看到 alert(...) (...) 好像你想调用 alert 的 return 值作为函数，但 alert 没有 return一个函数。这就是错误告诉您的内容。

如果要按顺序计算多个表达式，可以使用 comma operator:

condition ? case1 : (alert('some message'), <Redirect ... />)
//                  ^                     ^                 ^

您可以通过在 return 语句之前移动 alert 调用来实现相同的目的，这也使您的代码更简单：

render() {
  const isLoggedIn = localStorage.getItem("IsLoggedIn");
  if (!isLoggedIn) {
    alert(...);
  }

  return <Route ... />;
}

请注意 localStorage 仅存储字符串值，因此您可能需要将 localStorage.getItem("IsLoggedIn") 的 return 值转换为实际的布尔值。

说了这么多，请注意您应该避免使用 alert，因为它会阻塞。

三元运算符在反应中无法正常工作

Ternary operator not working properly in react

javascript

if-statement

ternary-operator

reactjs