渲染方法中的三元运算符

Question

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

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

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

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

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

Answer 1

使用简单的布尔表达式：

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