javascript - 如果设置为 0， react "value" Prop 不会到达 DOM

Question

我有一个呈现 <progress/> 的 React 组件由 Bootstrap 设计的元素。 <progress/>元素需要两个 Prop ，value和 max , 并使用这些来绘制进度条。它大部分时间都很好用。然而，当value=0 , value prop 本身不会出现在 DOM 中。这会导致组件显示为“脉动”的进度条(即，它的进度条部分永远从左向右滚动)。

也就是下面的代码是由React返回的render方法:
<progress value=0 max=255>0/255</progress>


但这是到达实际 DOM 的内容:
<progress max=255>0/255</progress>


这是什么原因造成的？它适用于所有其他情况(即 0 < 值 < 最大值)就好了。 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？)解决方案。

React.createElement 没有将值 0 传递给这个特定的 html 组件. progressbar specification表示该值必须是 float 。因此，转换为两位十进制数后的值是 0.00以正确通过。

尝试将您的代码更改为:<progress value={parseFloat(row.quantity).toFixed(2)} />

它应该可以解决问题。