Implementierung der React-Sternebewertungskomponente

<StarScore-Punktzahl={data.wm_poi_score}/>

lass wm_poi_score = this.props.score || '';
lass score = wm_poi_score.toString();
lass scoreArray = score.split('.');

// Vollständige Sternzahl let fullstar = parseInt(scoreArray[0]);
// Anzahl der halben Sterne let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0;
// Anzahl der grauen Sterne let nullstar = 5 - fullstar - halfstar;

lass starjsx = [];
// Vollständige Sterne rendern für (let i = 0; i < fullstar; i++) {
  starjsx.push(<div Schlüssel={i + 'full'} Klassenname="star fullstar"></div>)
}
// Halben Stern rendern, wenn (halber Stern) {
  für (sei j = 0; j < Halbstern; j++) {
    starjsx.push(<div Schlüssel={j + 'half'} Klassenname="Star Halfstar"></div>)
  }
}
// Grauen Stern rendern, wenn (nullstern) {
  für (let k = 0; k < nullstar; k++) {
    starjsx.push(<div Schlüssel={k + 'null'} Klassenname="star nullstar"></div>)
  }
}

<div Klassenname="Sternbereich">
  {this.renderStar()}
</div>

macheEva(i) {
  dies.setState({
    StartIndex: i + 1
  });
}

renderStar() {
  lass Array = []
  für (sei i = 0; i < 5; i++) {
    lass cls = i >= this.state.startIndex ? "Sternelement" : "Sternelement Licht"
    array.push(
      <div onClick={() => this.doEva(i)} Schlüssel={i} Klassenname={cls}></div>
    )
  }
  Array zurückgeben
}

importiere React von „react“;
importiere './StarScore.scss';

// Rendere die 5-Sterne-Score-Methode der Klasse StarScore, die React.Component erweitert {
  renderScore() {
    lass wm_poi_score = this.props.score || '';
    lass score = wm_poi_score.toString();
    lass scoreArray = score.split('.');
    // Vollständige Sternzahl let fullstar = parseInt(scoreArray[0]);
    // Anzahl der halben Sterne let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0;
    // Anzahl der grauen Sterne let nullstar = 5 - fullstar - halfstar;
    lass starjsx = [];

    // Vollständige Sterne rendern für (let i = 0; i < fullstar; i++) {
      starjsx.push(<div key={i + 'full'} className="star fullstar"></div>)
    }
    // Halben Stern rendern, wenn (halber Stern) {
      für (sei j = 0; j < Halbstern; j++) {
        starjsx.push(<div Schlüssel={j + 'half'} Klassenname="Star Halfstar"></div>)
      }
    }
    // Grauen Stern rendern, wenn (nullstern) {
      für (let k = 0; k < nullstar; k++) {
        starjsx.push(<div Schlüssel={k + 'null'} Klassenname="star nullstar"></div>)
      }
    }
    Rückkehr starjsx;
  }
  rendern() {
    return <div className="star-score">{this.renderScore()}</div>;
  }
}

Standard-StarScore exportieren;

.Sterne-Score {
  .Stern {
    Breite: 10px;
    Höhe: 10px;
    schweben: links;
    Hintergrundgröße: Abdeckung;
  }

  .voller Stern {
    Hintergrundbild: URL('./img/fullstar.png');
  }

  .halber Stern {
    Hintergrundbild: URL('./img/halfstar.png');
  }

  .nullstar {
    Hintergrundbild: URL('./img/gray-star.png');
  }
}

importiere './Main.scss';
importiere React von „react“;

Klasse Main erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    }
  }
  
  /**
   * Klicken Sie hier, um zu bewerten */
  macheEva(i) {
    dies.setState({
      StartIndex: i + 1
    });
  }
  /**
   * Sterne für die Rendering-Bewertung */
  renderStar() {
    lass Array = []
    für (sei i = 0; i < 5; i++) {
      lass cls = i >= this.state.startIndex ? "Sternelement" : "Sternelement Licht"
      array.push(
        <div onClick={() => this.doEva(i)} Schlüssel={i} Klassenname={cls}></div>
      )
    }
    Array zurückgeben
  }
  rendern() {
    zurückkehren (
      <div Klassenname="Inhalt">
        <div Klassenname="Sternbereich">
            {this.renderStar()}
          </div>
      </div>
    );
  }
}

Standard-Main exportieren;

.Inhalt {
  Höhe: 100%;
  .eva-Inhalt {
    Hintergrundfarbe: #fff;
    Überlauf: versteckt;
    Rand: px2rem(10px);
    Rand oben: px2rem(74px);
  }
  .Sternbereich {
    Textausrichtung: zentriert;
    Rand oben: px2rem(30px);
  }
  .Stern-Element {
    Breite: px2rem(32px);
    Höhe: px2rem(32px);
    Hintergrundbild: URL('./img/gray-star.png');
    Hintergrundgröße: Abdeckung;
    Anzeige: Inline-Block;
    Rand rechts: px2rem(10px);

    &.Licht {
      Hintergrundbild: URL('./img/light-star.png');
    }
  }
}