Условный встроенный стиль в реагировать JS

Question

Я хочу скрыть кнопку, если this.state.task.status == 'Завершено' (Как добавление отображения: свойство отсутствует)

Код:

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

textColor - еще один стиль, который отлично работает.

Answer 1

Вы хотите передать только одну style опору компоненту.Пропуская два, второй переопределяет первый, в результате чего ваш стиль display никогда не подходит к стилям:

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

Я также поддерживаю ответ @ MRchief: в React, если вы неЕсли вы не хотите показывать элемент, вы не должны отображать его, если вам по какой-то причине не требуется его скрытие на странице (например, скрытый ввод).

Answer 2

Вы можете сделать это:

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