在三元运算符中使用多个条件以停止在特定溃败中渲染组件

Question

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

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

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

Answer 1

任何布尔表达式在三进制中均有效。

但是，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)

那么，如果您决定要添加另一条路径，则可以轻松扩展单线