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

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 中将该值用于前端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！