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

Question

反应起来真的很新鲜，我在Navbar.js中使用react-router-domuseLocation挂钩进行了这部分导航，我能够获得我必须查看的活动路径，并且我想在用户使用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}
</>
);
}

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

Answer 2

您可以在类似的JSX中使用三元运算符进行条件呈现

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

简单：-(

Answer 3

您需要：

• 返回值
• 使用JSX而不是字符串
• 将所有东西放入容器中，例如React Fragment

例如：

if(path==="login" || path==="signin") {
return <>
<h1>Welcome</h1>
{userName}!
</>;
}

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