我正在使用 react-bootstrap ui 庫作為進度條。我希望它在頁面加載時影片進度條從 0 到 70。
我如何實作它？
這是代碼
組件.js
<ProgressBar
animated
now={70}
className="progress-bar"
/>
組件樣式
.progress-bar {
width: 400px;
}
預期輸出：它應該在頁面加載時從 0 到 70 進行影片處理。
uj5u.com熱心網友回復：
該animate屬性不會為進度設定影片，但會為進度條上的條紋設定影片。
從檔案：
Animate's the stripes from right to left
您需要的是一個更新now屬性的計時器。大概是這樣的：
const MyComp = () => {
const [progressNow, setProgressNow] = useState(0)
const updateProgressNowHandler = setInterval(() => {
if (progressNow >= 70 ){
setProgressNow(70)
clearInterval(updateProgressNowHandler)
}
setProgressNow(s => s 1)
}, 50)
return
<ProgressBar
animated
now={progressNow}
className="progress-bar"
/>
}
這絕不是生產就緒。
您需要確保在卸載組件時清除間隔。
如果組件有可能被重新渲染（這很可能會發生），您需要跟蹤已經取得的進展，并從最后一個值開始計數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360345.html
標籤：javascript 反应 推特引导 反应引导
上一篇：引導程式中的CSS動態影像大小