javascript - 如何在ReactJS中为div分配变量ID或类名

我正在使用ReactJS开发一个评分系统。

我的代码如下-
这是我的ReviewCard组件中的基本代码。
这基本上会返回一个div，其中将显示评论，用户名和评分。

starfunc(){
document.querySelector('.stars-inner').style.width = starPercentageRounded;
}

render(){
<h1 className="rating">Rating : {review.Rating}
            <div class="stars-outer">
               <div class="stars-inner" ></div>
              </div>
            </h1>
}

这是我的评论组件
它从数据库接收评论，对于每个评论，都映射到ReviewCard组件

const reviewColumns = reviews ? reviews.map(review => (

        <ReviewCard review={review} styles={{backgroundColor:"black"},{padding:"5px"}} />

    )) : null;

问题是在我的ReviewCard中，document.querySelector（'。stars-inner'）始终采用第一个实例。这导致唯一的第一次审核每次都会更改。

有没有办法保持id或classname变量或唯一？还是我应该遵循其他方法？

这是完整的代码

评论卡

class ReviewCardComponent extends React.Component {
  constructor(props) {
    super(props);


  }

  componentDidMount(){
    this.starfunc();
  }

  starfunc() {
    var {review} = this.props;
    var rating = review.Rating
    if(rating>5){
      rating = rating/2;
    }
    al = 5;

  const starPercentage = (rating / starTotal) * 100;
  const starPercentageRounded = `${(Math.round(starPercentage / 10) * 10)}%`;
  document.querySelector(id).style.width = starPercentageRounded;
  }


  render() {
    console.log("reviewcard",this.props);

    const {review} = this.props;
    // The CardTitle.subtitle won't render if it's null

    console.log("qwer",review.review_id);
    return (


      <div className="main">
        <div className="fline">

          <h1 className="name">{review.user_name}</h1>


          <h1 className="rating">Rating : {review.Rating}
            <div class="stars-outer">
               <div class="stars-inner" id={review.user_name}></div>
              </div>
            </h1>

          <button className="DeleteOptions">Options</button>

        </div>

        <h2 className="reviewtext">{review.review}</h2>
        <hr/>
      </div>



    );
  }
}

它的CSS文件

.stars-outer {
    display: inline-block;
    position: relative;
    font-family: FontAwesome;
  }

  .stars-outer::before {
    content: "\f006 \f006 \f006 \f006 \f006";
  }

  .stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
  }

  .stars-inner::before {
    content: "\f005 \f005 \f005 \f005 \f005";
    color: #f8ce0b;
  }

最佳答案

您的方法是错误的：）您不应使用querySelector，因为这会访问实际DOM元素，而不是React virtualDOM元素；方法是使用React Refs系统：


在构造函数的ReviewCard组件中，放入this.review = React.createRef（）;
在类为“ stars-inner”的div中，将ref = {this.review}作为道具；
在您的componentDidMount（）生命周期方法中，使用this.review.current.style.width设置样式


PS：您的ReviewCard组件的render（）中的JSX返回值在哪里？