如何将值从后端传递到 React 前端并在 CSS 中将该值用于前端?
时间：2023-09-06问题描述
我使用 Python 作为我的 React 前端的后端，现在我的后端正在传递 17 或 87 之类的值，我想将该值用作我正在建立的规模的百分比.现在，您可以看到刻度从中间开始:
而且它不会移动到任何地方，因为后端还没有给它一个数字.但是如果后端给出 23 的分数，三角形将移动到 div 的 23% 处(在黑色边框中勾勒出来):
这是我的 React 前端 HTML 部分的代码:
<div类名={!this.state.listening?结果容器":'结果容器关闭'}><div className="结果包装器">{this.state.score === ''?'点击记录并查看你的分数': '你的分数:' + this.state.score}</div></div><div className=规模容器"><div className="bar"><div className=""向上箭头"></div><div className=""scale-meter"></div><span></span></div></div>this.state.score 是我从后端获取分数时存储分数的位置.
这是我的 CSS:
.arrow-up {宽度:0；高度:0；左边框:25px 纯透明；边框右:25px纯透明；文本对齐:居中；行高:35px；位置:绝对；顶部:54px；z-index:1；边框底部:25px 纯紫色；动画:缩放 4s 缓动；}@keyframes 缩放 {从 {左:48%；}}.bar:nth-child(1) .arrow-up{左:23%；}.bar:nth-child(1) .arrow-up 部分是我希望根据分数更改 left 的位置.有没有一种方法可以做到这一点，而不是硬编码 left 值，它可以是 left: score%; 之类的东西?
您可以使用内联样式，其中 this.state.score 将是您的 left 属性值:
style={{ left: `${this.state.score}%` }}您可以使用反引号将 % 字符串与末尾的 score 值连接起来:
<div类名={!this.state.listening?结果容器":'结果容器关闭'}><div className="结果包装器">{this.state.score === ''?'点击记录并查看你的分数': '你的分数:' + this.state.score}</div></div><div className=规模容器"><div className="bar">I'm using Python as the backend for my React frontend and right now my backend is passing in values like 17 or 87 and I want to use that value as a percentage in the scale I'm building. Right now, you can see that the scale starts in the middle:
And it doesn't move anywhere because the backend hasn't given it a number yet. But if the backend gave a score of 23, the triangle would move to exactly 23% of the div (outlined in the black border):
Here is the code in the HTML part of my React frontend:
<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 is where the score is stored when I get it from the backend.
This is my 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%;
}
The .bar:nth-child(1) .arrow-up part is where I want the left to be changed based on the score. Is there a way I can make it so that instead of me hardcoding the left value, it can be something like left: score%;?
解决方案 You can use inline styling where this.state.score will be your value for left property:
style={{ left: `${this.state.score}%` }}
You can use back-ticks to concatenate % string with score value at the end:
<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>
这篇关于如何将值从后端传递到 React 前端并在 CSS 中将该值用于前端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
layer.open打开的页面关闭时，父页面刷新的方法layer.open打开的页面关闭时，父页面刷新的方法，在layer.open中添加： end: function(){ window.parent.location.reload();//关闭open打开的页面时，刷新父页面 }