Question

我正在使用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>
}

这是我的评论组件 它从DB接收评论，并且对于每个评论，都映射到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;
  }

Answer 1

对于您来说，我认为<Review />组件看起来像这样：

请注意，我已将您的starfunc函数更改为箭头函数以利用this
每个percentage组件中都有一个<Review />状态，默认情况下为0

class ReviewCardComponent extends React.Component {
  state = {
    percentage: 0,
  }

  componentDidMount() {
    this.starfunc();
  }

  starfunc = () => {
    const { review } = this.props;
    const rating = review.Rating;
    const starTotal = 5;

    if (rating > 5) {
      rating = rating / 2;
    }

    const starPercentage = (rating / starTotal) * 100;
    const starPercentageRounded = Math.round(starPercentage / 10) * 10;

    this.setState({
      percentage: starPercentageRounded || 0
    })
  }

  render() {
    const { review } = this.props;
    const { percentage } = this.state;
    // 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} style={{width: `${percentage}%`}}></div>
            </div>
          </h1>

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

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

Answer 2

您的方法是错误的:)您不应使用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的返回在哪里？

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

2 个答案: