如何在 NextJS 中新增星級評分元件？

我們可以使用像 react-star-rating 這樣的庫在 NextJS 中新增星級評分功能。這個庫允許我們輕鬆地顯示星級評分系統，並允許自定義星級數量以及處理使用者互動的能力。Next.js 是一個開源的 Web 開發框架。Next.js 是基於 React 的框架，具有伺服器端渲染功能。速度和 SEO 都非常出色。您可以使用 Next.js 輕鬆構建和測試複雜的基於 React 的應用程式。

Next.js 使用 TypeScript 編寫。它提供了一個 Link 元件，用於將其他元件連結在一起，並具有一個 prefetch 屬性，允許後臺預取頁面資源。它支援 React 元件和 JavaScript 模組的動態匯入。此外，它還允許您匯出 Web 應用程式的整個靜態站點。

Next.js 允許您從 JavaScript 檔案中匯入 CSS 檔案。這是可能的，因為 Next.js 擴充套件了 import 的概念，使其超越了 JavaScript。

要開始，首先建立一個新的 NextJS 應用程式，並在我們的開發伺服器上執行它，如下所示：

npx create-next-app rating-app
cd phone-input
npm start

方法

  • 首先，使用 npm 或 yarn 安裝 **react-star-rating-component** 包：

npm install react-star-rating-component

  • 在您想要新增星級評分的元件中，從 react 中匯入 StarRating 元件和 useState hook：

import StarRating from 'react-star-rating-component';
import { useState } from 'react';

  • 在元件中，定義一個狀態變數來儲存當前評分，以及一個函式來處理 onStarClick 事件：

const [rating, setRating] = useState(0);
const handleStarClick = (nextValue, prevValue, name) => {
   setRating(nextValue);
}

  • 在 JSX 程式碼中，使用 StarRating 元件並設定所需的屬性，例如 value 和 onStarClick：

<StarRating 
   value={rating} 
   onStarClick={(nextValue, prevValue, name) => handleStarClick(nextValue, prevValue, name)}
/>

  • 可選 - 您還可以透過傳遞其他屬性（如 starCount、starColor、emptyStarColor 等）來自定義星級評分元件的外觀。

<StarRating 
   value={rating} 
   onStarClick={(nextValue, prevValue, name) => handleStarClick(nextValue, prevValue, name)}
   starCount={5}
   starColor={'#ffb400'}
   emptyStarColor={'#ccc'}
/>

  • 確保包含 StarRating 元件所需的 CSS。該包文件提供了一個可用於樣式設定的示例 CSS 檔案。

  • 最後，在您的 JSX 程式碼中包含 StarRating 元件並進行測試。使用者現在應該能夠選擇一個評分，並且該值將在狀態中更新。

示例

因此，評分元件應用程式的最終程式碼將是：

StarRating.js

import React, { useState } from 'react';
import Rating from 'react-star-rating-component';
function StarRating(){
   const [rating, setRating] = useState(0);
   const handleStarClick = (nextValue, prevValue, name) => {
      setRating(nextValue);
   }
   return (
      <div>
         <Rating
            value={rating}
            onStarClick={(nextValue, prevValue, name) => handleStarClick(nextValue, prevValue, name)}
            starCount={5}
            starColor={'#ffb400'}
            emptyStarColor={'#ccc'}
         />
      </div>
   )
}
export default StarRating;

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import StarRating from "./StarRating";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
   <StrictMode>
      <StarRating />
   </StrictMode>
);

輸出

更新於: 2023年2月13日

3K+ 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告