react js中的条件内联样式

Question

如果this.state.task.status == 'Completed'我想隐藏按钮（比如添加 display: none 属性）

代码：

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

textColor是另一种工作正常的样式。

Answer 1

您只想将单个styleprop 传递给组件。通过传递两个，第二个将覆盖第一个，导致您的display样式永远不会成为样式：

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

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