如果設置爲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

回答

相關問題