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

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

我使用 Python 作为我的 React 前端的后端,现在我的后端正在传递 1787 之类的值,我想将该值用作我正在建立的规模的百分比.现在,您可以看到刻度从中间开始:

而且它不会移动到任何地方,因为后端还没有给它一个数字.但是如果后端给出 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>

相关文章