javascript - 渲染方法中的三元运算符

Question

如果用户未登录，我正在尝试显示一条消息。请在此处登录以继续。

在我的渲染方法中，我需要检查用户是否已经登录以不显示任何消息。
我还有一个登录方法，可以将用户引导到登录页面。(

{
  this.props.isAuthed 
    ? <div> </div>
    : <div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>
}

我有两个问题。一个是上面的 if 语句不起作用，因为它不是 if else 语句。（我找到的唯一解决方案是添加一个空的<div>）

另一个问题是我需要显示一个看起来像超链接文本的按钮，因为我无法this.login在href. 现在“登录”和“这里”之间有一个很大的空间（因为按钮）。我还需要将“此处”设为红色以告知用户它是可点击的。

score 2 · Accepted Answer

使用简单的布尔表达式：

 {!this.props.isAuthed &&
  <div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>
 }

1 回答 1