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

Question

我使用 Python 作为我的 React 前端的后端，现在我的后端正在传递像 17 或 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%; 之类的东西？

Answer 1

您可以使用内联样式，其中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>