如何将值从后端传递到 React 前端并在 CSS 中将该值用于前端?

2022-01-19 00:00:00 reactjs frontend css

我使用 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>


	
		相关文章