React 星評価コンポーネントの実装

<StarScore スコア={data.wm_poi_score}/>

wm_poi_score を this.props.score || とします。
スコアをwm_poi_score.toString()とします。
scoreArray = score.split('.'); とします。

// 完全な星の数 let fullstar = parseInt(scoreArray[0]);
// 半分の星の数 let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0;
// 灰色の星の数 let nullstar = 5 - fullstar - halfstar;

starjsx = [] とします。
// 完全な星をレンダリングする for (let i = 0; i < fullstar; i++) {
  starjsx.push(<div key={i + 'full'} className="star fullstar"></div>)
}
// 半分の星をレンダリングする if (halfstar) {
  (j = 0; j < ハーフスター; j++) の場合 {
    starjsx.push(<div key={j + 'half'} className="star halfstar"></div>)
  }
}
// 灰色の星をレンダリングします if (nullstar) {
  (k = 0; k < nullstar; k++ とします) {
    starjsx.push(<div key={k + 'null'} className="star nullstar"></div>)
  }
}

<div className="スターエリア">
  {this.renderStar()}
</div>

doEva(i) {
  this.setState({
    開始インデックス: i + 1
  });
}

レンダースター() {
  配列 = [] とする
  (i = 0; i < 5; i++ とします) {
    cls = i >= this.state.startIndex ? "スターアイテム" : "スターアイテム ライト" とします
    配列.push(
      <div onClick={() => this.doEva(i)} キー={i} クラス名={cls}></div>
    ）
  }
  配列を返す
}

'react' から React をインポートします。
'./StarScore.scss' をインポートします。

// 5つ星スコアメソッドをレンダリングする class StarScore extends React.Component {
  レンダリングスコア() {
    wm_poi_score を this.props.score || とします。
    スコアをwm_poi_score.toString()とします。
    scoreArray = score.split('.'); とします。
    // 完全な星の数 let fullstar = parseInt(scoreArray[0]);
    // 半分の星の数 let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0;
    // 灰色の星の数 let nullstar = 5 - fullstar - halfstar;
    starjsx = [] とします。

    // 完全な星をレンダリングする for (let i = 0; i < fullstar; i++) {
      starjsx.push(<div key={i + 'full'} className="star fullstar"></div>)
    }
    // 半分の星をレンダリングする if (halfstar) {
      (j = 0; j < ハーフスター; j++) の場合 {
        starjsx.push(<div key={j + 'half'} className="star halfstar"></div>)
      }
    }
    // 灰色の星をレンダリングします if (nullstar) {
      (k = 0; k < nullstar; k++ とします) {
        starjsx.push(<div key={k + 'null'} className="star nullstar"></div>)
      }
    }
    starjsx を返します。
  }
  与える（） {
    <div className="star-score">{this.renderScore()}</div> を返します。
  }
}

デフォルトの StarScore をエクスポートします。

.星スコア {
  。星 {
    幅: 10px;
    高さ: 10px;
    フロート: 左;
    背景サイズ: カバー;
  }

  .fullstar {
    背景画像: url('./img/fullstar.png');
  }

  .ハーフスター{
    背景画像: url('./img/halfstar.png');
  }

  .nu​​llstar {
    背景画像: url('./img/gray-star.png');
  }
}

'./Main.scss' をインポートします。
'react' から React をインポートします。

クラスMainはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    }
  }
  
  /**
   * クリックして評価してください */
  実行Eva(i) {
    this.setState({
      開始インデックス: i + 1
    });
  }
  /**
   * レンダリング評価の星 */
  レンダースター() {
    配列 = [] とする
    (i = 0; i < 5; i++ とします) {
      cls = i >= this.state.startIndex ? "スターアイテム" : "スターアイテム ライト" とします
      配列.push(
        <div onClick={() => this.doEva(i)} キー={i} クラス名={cls}></div>
      ）
    }
    配列を返す
  }
  与える（） {
    戻る （
      <div クラス名="コンテンツ">
        <div className="スターエリア">
            {this.renderStar()}
          </div>
      </div>
    );
  }
}

デフォルトのメインをエクスポートします。

。コンテンツ {
  高さ: 100%;
  .eva-コンテンツ{
    背景色: #fff;
    オーバーフロー: 非表示;
    マージン: px2rem(10px);
    上マージン: px2rem(74px);
  }
  .star-area {
    テキスト配置: 中央;
    上マージン: px2rem(30px);
  }
  .スターアイテム{
    幅: px2rem(32px);
    高さ: px2rem(32px);
    背景画像: url('./img/gray-star.png');
    背景サイズ: カバー;
    表示: インラインブロック;
    右マージン: px2rem(10px);

    ＆。ライト {
      背景画像: url('./img/light-star.png');
    }
  }
}