React Js Es 6 风格的三元运算符

Question

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

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

原文由 user992731 发布，翻译遵循 CC BY-SA 4.0 许可协议

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' } }
/>

原文由 FurkanO 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

三元组应该如下所示：

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

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

原文由 Jason Cemra 发布，翻译遵循 CC BY-SA 4.0 许可协议