NextJS 如何添加一个星级评价组件

我们可以通过使用react-star-rating这样的库在NextJS中添加一个星级评价功能。这个库允许我们轻松地显示一个星级评价系统，并允许自定义星级的数量和处理用户互动的能力。Next.js是一个开源的Web开发框架。Next.js是基于React的框架，具有服务器端渲染能力。速度和SEO都很好。你可以使用Next.js简单地构建和测试复杂的基于反应的应用程序。

Next.js是用Typescripts编写的。它提供了一个链接组件，将其他组件链接在一起，并有一个预取属性，允许后台预取页面资源。它能够动态导入React组件和JavaScript模块。另外使你能够导出你的网络应用程序的整个静态站点。

Next.js允许你从一个JavaScript文件导入CSS文件。这是可能的，因为Next.js将导入的概念扩展到了JavaScript之外。

To get started first create a new NextJS app and run it on our dev server like this −

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钩。

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组件，并设置所需的props，如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>
);