React «value» prop, не достигнув DOM, если установлен в 0

Question

У меня есть компонент React, который отображает элемент <progress/> в стиле Bootstrap. Элемент <progress/> берет два реквизита: value и max и использует их для рисования индикатора выполнения. Он отлично работает большую часть времени. Однако, когда value=0, само устройство value не появляется в DOM. Это заставляет компонент отображаться как индикатор выполнения, который «пульсирует» (т. Е. Его часть прокручивается слева направо навсегда).

То есть, следующий код возвращается методом Реагировать render: <progress value=0 max=255>0/255</progress>

Но это то, что доходит до фактического DOM: <progress max=255>0/255</progress>

Что вызывает это? Он работает во всех других случаях (то есть 0 < значение < max) просто отлично. Как я могу сделать это правильно, когда value=0?

Изменить: функция render() ниже:

var barColor = "info"; 

if (row.fraction <= 0.25) 
    barColor = "danger"; 

else if (row.fraction <= 0.50) 
    barColor = "warning"; 

return (
    <div> 
     <Col md={10}> 
      <progress className={"progress progress-" + barColor} value={row.quantity} max={row.total}> 
       {row.quantity + "/" + row.total} 
      </progress> 
     </Col> 
     <Col md={2}> 
      <span style={{fontSize: "12px"}}>{row.quantity + "/" + row.total}</span> 
     </Col> 
    </div> 
); 

Answer 1

Нашли (Hacky?) Решение.

Как-то значение 0 не передается этому конкретному компоненту html на React.createElement. progressbar specification говорит, что значение должно быть поплавка. Таким образом, преобразование в два десятичных числа позволило правильно передать значение 0.00.

Попробуйте изменить свой код: <progress value={parseFloat(row.quantity).toFixed(2)} />

Это следует сделать трюк.