ReactJS中如何为Semantic UI(CSS)进度条添加或修改进度值

实现方案 #

你之前的写法无效是因为仅引入了Semantic UI的CSS文件，其官方文档中提到的data-value、data-total等属性的动态渲染效果依赖Semantic UI配套的JS脚本与jQuery，且React框架下直接设置自定义属性无法自动触发视图更新，推荐直接通过React状态控制进度条宽度即可，不需要额外引入其他依赖。

最简实现代码（函数组件）：

import { useState } from 'react'

function App() {
  // 存储进度值，取值范围0-100
  const [progressValue, setProgressValue] = useState(10)

  return (
    <div>
      <div className="ui green progress">
      {/* 动态控制进度条宽度 */}
        <div 
          className="bar"
          style={{ width: `${progressValue}%`, transition: 'width 0.3s ease' }}
        >
          {/* 可选：显示进度数值 */}
          <div className="progress">{progressValue}%</div>
        </div>
      </div>
      {/* 测试按钮，点击进度+10 */}
      <button 
        className="ui button" 
        onClick={() => setProgressValue(prev => Math.min(prev + 10, 100))}
      >
        增加进度
      </button>
    </div>
  )
}

后续需要修改进度值时，直接调用setProgressValue传入目标数值即可，进度条会自动同步更新视图。

内容的提问来源于stack exchange，提问作者Mani