javascript - 如何在 ReactJS 中将变量 id 或类名分配给 div

问题描述

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

标签： javascriptreactjs

在您的情况下，我认为该<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>
    );
  }
}

javascript - 如何在 ReactJS 中将变量 id 或类名分配给 div

问题描述

解决方案

推荐阅读