Reactでスターレーティングを作成する方法

プロジェクトのセットアップ: まず、Reactプロジェクトをセットアップします。必要な依存関係をインストールし、Reactコンポーネントを作成するための開発環境を構築します。
スターレーティングコンポーネントの作成: 新しいファイルでStarRating.jsという名前のReactコンポーネントを作成します。このコンポーネントは、スターレーティングの表示とユーザーのインタラクションを処理します。

以下は、基本的なStarRatingコンポーネントの例です。

import React, { useState } from 'react';
const StarRating = () => {
  const [rating, setRating] = useState(0);

  const handleRating = (value) => {
    setRating(value);
  };

  return (
    <div>
      {[...Array(5)].map((_, index) => (
        <span
          key={index}
          onClick={() => handleRating(index + 1)}
          style={{ color: index < rating ? 'gold' : 'gray', cursor: 'pointer' }}
        >
          &#9733;
        </span>
      ))}
    </div>
  );
};
export default StarRating;

この例では、useStateフックを使用してratingステートを管理します。ratingは現在の評価を表し、初期値は0です。handleRating関数は、ユーザーがスターをクリックしたときに呼び出され、クリックされたスターの数に基づいてratingステートを更新します。

スターレーティングコンポーネントの使用: スターレーティングコンポーネントを他のコンポーネントで使用する方法を見てみましょう。

import React from 'react';
import StarRating from './StarRating';
const App = () => {
  return (
    <div>
      <h1>製品評価</h1>
      <StarRating />
    </div>
  );
};
export default App;

この例では、StarRatingコンポーネントをAppコンポーネント内でインポートして使用しています。このようにして、製品評価のセクションにスターレーティングを表示することができます。

以上がReactでスターレーティングを作成する方法のシンプルな例です。この方法を使用すると、ユーザーがアイテムに対して簡単に評価を付けることができます。必要に応じてスタイリングや追加の機能を実装することもできます。