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

Question

反应真的很新，我在我的 Navbar.js 中使用 react-router-dom useLocation 挂钩进行了这部分导航，我能够获得我必须查看的活动路径并且我想呈现自定义当用户到达带有 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}!
    </>;
}

… 但该逻辑可能应该由您的路由处理，而不是 if 语句。

Answer 2

您必须明确说明要 return 的内容，在您的示例中您没有 return 任何内容。因此，您可以执行以下任一操作：

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

或者使用运算符&&有条件地渲染。

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

详细了解条件渲染 [here]

Answer 3

您可以在JSX中使用三元运算符进行条件渲染，例如

{path==="login" || path==="signin" ? <> <h1>welcome</h1> {userName} </> : null}

简单:-)

Render a component in jsx if a certain condition is met