React Js Es 6风格的三元算子

Question

我正在尝试添加以下三元运算符来显示我的按钮,如果我已登录并且如果我不隐藏它.以下内容不断给我一个错误.

<img src={this.state.photo} alt="" style="{isLoggedIn ? 'display:' : 'display:none'}"  />

Answer 1

您为style属性提供的内容应该是一个对象.因为我们在花括号之间用jsx编写js代码,所以你会在那里插入一个对象.

记住,你需要camelCase所有的css道具.(font-size ==> fontSize)

<img 
  src={this.state.photo} 
  alt="" 
  style={ isLoggedIn ? { display:'block'} : {display : 'none'} }  
/>

要么

<img
  src={this.state.photo} 
  alt=""
  style={ { display: isLoggedIn ? 'block' : 'none' } }  
/>

我更喜欢第二个.

Answer 2

三元应该如下所示：

style={isLoggedIn ? { display:'block' } : { display:'none' }}

删除引号 - 它应该可以工作（假设isLoggedIn是一个布尔值）。