如果设置为0，则反应“值”prop未到达DOM0

我有一个React组件，呈现由Bootstrap设置的<progress/>元素。 <progress/>元素需要两个道具，value和max，并使用它们绘制进度条。它大部分时间都很好用。但是，当value=0，value prop本身不出现在DOM中。这导致组件显示为“脉动”的进度条（即，它的栏部分从左至右永远滚动）。如果设置为0，则反应“值”prop未到达DOM0

也就是说，下面的代码是由阵营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> 
);

来源

2016-06-22 sagargp

你可以发布你的渲染方法吗？ – mrlew

@mrlew我在编辑中添加了它。 – sagargp

不考虑完整源代码的唯一想法是某些'row.quantity'是'undefined'或'null'，导致价值道具不被渲染。你可以'console.log'来检查值是否真的为零？ – mrlew

发现一个（哈克？）溶液。

某种程度上，值0不会被React.createElement传递给这个特定的html组件。 progressbar specification表示该值必须是浮点数。因此，转换为两位十进制数可以使值0.00正确传递。

试着改变你的代码：<progress value={parseFloat(row.quantity).toFixed(2)} />

它应该做的伎俩。

来源

2016-06-22 01:48:19 mrlew

太棒了，就这么做了！ '0.0'但我想我需要额外的精度。谢谢！ – sagargp

我也写过这个，我发现这个行为是[知道反应错误]（https://github.com/facebook/react/issues/6704 ）。显然已经修好了。 – mrlew

就在13天前。谢谢你的支持！ – sagargp

如果设置为0，则反应“值”prop未到达DOM0

回答

相关问题