三元运算符无法正常工作

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的返回值作为函数来调用，但是alert不会返回函数。这就是错误告诉您的内容。

如果要按顺序求值多个表达式，可以使用comma operator：

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

---

您可以通过将alert语句前的return调用移到同一位置来实现相同的目的，这也使您的代码更简单：

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

  return <Route ... />;
}

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

---

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