三元操作员反应不正常

Question

所以我有一个名为PrivateRoute.js的组件，它基本上保护了一些路由并将用户重定向到登录页面，如果他们没有登录，我想在三元运算符内显示一条警报消息，我的警报通过但是经过一些秒我收到错误

PrivateRoute

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，因为它是阻塞的。