reactjs - 如何在 Material ui 中设置 LinearProgress 的最大值？

Question

我在我的页面中使用来自 material ui 的 LinearProgress 并且我的 LinearProgress 的最大值一直不是 100，有时它可以是 10、20、5 ……我试过做

   <LinearProgress
            variant="determinate"
            value={section.Remaining_Qty}
            maxValue={50} // added             
    />

但它不起作用。还有其他方法可以实现吗？

Answer 1

您可以使用公式通过 maxValue={100} 获取动态值和动态maxValue你有它(10,20,5...)

最终代码

let dynamicMaxValue = 5;

<LinearProgress
  variant="determinate"
  value={(section.Remaining_Qty * 100)/dynamicMaxValue}
  maxValue={100}
/>

dynamicMaxValue = 5和 section.Remaining_Qty = 2值(value)将be = 40%

记住section.Remaining_Qty <= dynamicMaxValue