我正在使用 Python 作為我的 React 前端的后端，現在我的后端正在傳遞諸如17or 之類的值87，我想將該值用作我正在構建的比例中的百分比。現在，您可以看到刻度從中間開始：
而且它不會移動到任何地方，因為后端還沒有給它一個數字。但如果后端給出的分數為23，則三角形將移動到 div 的 23% 處（在黑色邊框中勾勒出）：
這是我的 React 前端 HTML 部分的代碼：
<div
className={
!this.state.listening
? 'results-container'
: 'results-container-closed'
}
>
<div className="result-wrapper">
{this.state.score === ''
? 'Click record and check your score'
: 'Your Score: ' this.state.score}
</div>
</div>
<div className="scale-container">
<div className="bar">
<div className="arrow-up"></div>
<div className="scale-meter"></div>
<span></span>
</div>
</div>
this.state.score 是我從后端獲取分數時存盤分數的位置。
這是我的 CSS：
.arrow-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
text-align: center;
line-height: 35px;
position: absolute;
top: 54px;
z-index: 1;
border-bottom: 25px solid purple;
animation: scale 4s ease;
}
@keyframes scale {
from {
left: 48%;
}
}
.bar:nth-child(1) .arrow-up{
left: 23%;
}
這.bar:nth-child(1) .arrow-up部分是我希望left根據分數進行更改的地方。有沒有一種方法可以做到，而不是我對left值進行硬編碼，它可以是類似的東西left: score%;？
uj5u.com熱心網友回復：
您可以使用行內樣式this.state.score作為您的left屬性值：
style={{ left: `${this.state.score}%` }}
您可以使用反引號將 % 字串與score末尾的值連接起來：
<div
className={
!this.state.listening
? 'results-container'
: 'results-container-closed'
}
>
<div className="result-wrapper">
{this.state.score === ''
? 'Click record and check your score'
: 'Your Score: ' this.state.score}
</div>
</div>
<div className="scale-container">
<div className="bar">
<div className="arrow-up" style={{ left: `${this.state.score}%` }}></div>
<div className="scale-meter"></div>
<span></span>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/406680.html
標籤：
上一篇：單擊底部時如何替換div內容？
下一篇：CSS影片持續時間和速度