渲染方法中的三元运算符

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函数。现在，“登录”和“这里”之间有很大的空间（由于按钮）。我还需要将“此处”标记为红色，以告知用户可点击。

Answer 1

使用简单的布尔表达式：

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