时间戳

首页 > 解决方案 > 在三元运算符中使用多个条件来停止在特定路由上渲染组件

javascript - 在三元运算符中使用多个条件来停止在特定路由上渲染组件

问题描述

我有一个组件侧菜单。我想在所有页面上都有它，除了 singIn 和 singUp 页面。我选择这样做的方式是使用“useLocation”并在渲染组件之前检查 location.pathname。它看起来像这样：

let location = useLocation().pathname;
  return (
location !== '/signin' && '/signup' ? (
  <div>sidemenu</div>
) : (
  <>
  </>
)

但它仅适用于第一个语句。是否可以传递多个语句？或者可能有另一种方法不在两个/三个特定页面上呈现组件？

标签： javascriptreactjsreact-routerjsx

解决方案

任何布尔表达式在三元组中都是有效的。

但是，location !== '/signin' && '/signup'解析如下：

(location !== '/signin') && ('/signup')

所以你应该写：

`location !== '/signin' && location !== '/signup'

此外，而不是语法

(expression) ? (
  <div>sidemenu</div>
) : (
  <>
  </>
)

如果您不希望在false案例中呈现任何内容，则可以使用：

return (expression) && (<div>sidemenu</div>)

如果表达式为假，它将返回false并且不呈现任何内容，或者如果表达式为真，它将呈现您的 div。

此外，检查路径名列表的一个很好的语法是使用includes，如下所示：

['/signin', '/signup'].includes(useLocation().pathname)

如果您决定要添加另一条路径，那么您将拥有一个易于扩展的单线

推荐阅读