reactjs - React Js Es6 风格的三元运算符

Question

我正在尝试添加以下三元运算符，以在我登录时显示我的按钮并且如果我不隐藏它。下面的内容不断向我抛出错误。

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

Answer 1

您提供给样式属性的应该是一个对象。由于我们在 jsx 中的大括号之间编写了 js 代码，因此您将在那里插入一个对象。

请记住，您需要对所有 css 属性进行驼峰式命名。 (字体大小==>字体大小)

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

或

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