React JS中的条件内联样式

Question

如果 this.state.task.status =='已完成'（例如，添加显示：none属性），我想隐藏按钮

代码：

<Button size="small"           
style={{display:this.state.task.status == "Completed" ? "none":""}}              
style={textColor} >Mark as Completed</Button>

textColor 是另一种效果很好的样式。

Answer 1

您可以这样做：

<div>
{ this.state.task.status == "Completed" && (<Button size="small" style={textColor} >Mark as Completed</Button>) }
</div>

Answer 2

您只想将单个style属性传递给组件。通过传递两个，第二个将覆盖第一个，从而使您的display样式永远不会变为以下样式：

<Button
  size="small"           
  style={{
    display: this.state.task.status == "Completed" ? "none": "",
    textColor,
  }}              
>
  Mark as Completed
</Button>

我也支持@MRchief的回答：在React中，如果您不想显示元素，则不应该渲染它，除非出于某些原因（例如，隐藏的输入）将其特别隐藏在页面上）。