为什么我的条件打印它的条件值？

【问题标题】：Why is my conditional printing its condition value?为什么我的条件打印它的条件值？
【发布时间】：2022-08-18 19:03:43
【问题描述】：

我有条件仅在登录时显示顶部导航：

  const [adminState, setAdminState] = useState({
    loggedIn: 0,
  });
  return (
    <AdminState.Provider value={[adminState, setAdminState]}>
      {adminState.loggedIn && <TopNav />} <--- this line is printing 0 when logged out
      <Routes>
        <Route element={<ProtectedRoutes />}>
          <Route path=\"/\" element={<Home />} />
          <Route path=\"/about\" element={<About />} />
        </Route>
        <Route path=\"*\" element={<PageNotFound />} />
      </Routes>
    </AdminState.Provider>
  );
}

export default App;

注销时，它会打印条件所在的数字“0”。

标签： reactjs

【解决方案1】：

因为0 && <TopNav /> 的结果是0，当你在 JSX 表达式中提供数字时，React 会显示数字。它只是遗漏了null、undefined 和false。（注意：&& 是逻辑与运算符，而不是条件运算符。）

相反，要么：

使用false 而不是0 作为loggedIn 标志；那么您的 && 表达式将导致 false 并且 React 不会为该 JSX 表达式显示任何内容。

或者

使用实际的条件运算符：

{adminState.loggedIn ? <TopNav /> : null}

【讨论】：