如何在 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+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告