Reactjs 如何使用fabric UI在进度栏中显示进度完成百分比？

我正在使用fluent UI显示进度条

我提到的链接：

我在使用react显示进度条中的百分比时遇到困难。有人能提出这个建议吗

---

谢谢，

如果您只想显示百分比，那么我所做的就是将百分比添加到

标记中，并使用用于增加进度条的百分比来显示百分比

由于根据

文档

，数字从0增加到1，我们可以做的是将输出乘以100，然后取

数学底数

const{ProgressIndicator，Fabric:FabricComponent，initializecons}=window.Fabric；
//在本例中使用图标时初始化图标
初始化图标（）；
常数间隔延迟=100；
常数间隔增量=0.01；
const ProgressIndicatorBasicExample:React.FunctionComponent=（）=>{
常量[percentComplete，setPercentComplete]=React.useState（0）；
React.useffect（（）=>{
常量id=setInterval（（）=>{
设置完成百分比（（间隔增量+完成百分比）%1）；
}，间隔延迟）；
return（）=>{
清除间隔（id）；
};
});
返回(
{数学地板（完成百分比*100）}%

);
};
常量ProgressIndicatorBasicExampleWrapper=（）=>；
ReactDOM.render（，document.getElementById（'content'））

你只想显示百分比吗？是的，我想显示完成百分比，比如20%、30%……100%

const { ProgressIndicator, Fabric: FabricComponent, initializeIcons } = window.Fabric;

// Initialize icons in case this example uses them
initializeIcons();

const intervalDelay = 100;
const intervalIncrement = 0.01;

const ProgressIndicatorBasicExample: React.FunctionComponent = () => {
  const [percentComplete, setPercentComplete] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setPercentComplete((intervalIncrement + percentComplete) % 1);
    }, intervalDelay);
    return () => {
      clearInterval(id);
    };
  });

  return (
    <>
      <ProgressIndicator label="Example title" description="Example description" 
      percentComplete={percentComplete} />
      <p>{Math.floor(percentComplete * 100)}%</p>
    </>
  );
};

const ProgressIndicatorBasicExampleWrapper = () => <FabricComponent><ProgressIndicatorBasicExample /></FabricComponent>;
ReactDOM.render(<ProgressIndicatorBasicExampleWrapper />, document.getElementById('content'))