如果满足特定条件，则在 jsx 中渲染组件

Question

反应确实很新，我使用react-router-domuseLocation 钩子在 Navbar.js 中使用了这部分导航，我能够获得视图的活动路径，并且当用户使用类似的内容到达视图时我想渲染自定义JSX文本

if(path==="login" || path==="signin"){
  `<h1>welcome</h1> ${userName}!` 
}

如何检查是否满足条件 A 或 B，然后使用以下命令渲染适当的文本jsx

Answer 1

您必须明确告知要返回什么，在您的示例中，您不返回任何内容。所以，你可以这样做：

if (path === "login" || path === "signin") {
  return (
    <>
      <h1>welcome</h1> {userName}
    </>
  );
} else {
  return null;
}

或者使用运算符&&进行条件渲染。

{
  (path === "login" || path === "signin") && (
    <>
      <h1>welcome</h1> {username}
    </>
  );
}

阅读有关条件渲染的更多信息 [此处]