如何在 NextJS 中添加星级？

在开发网站和应用程序时，添加星级评分功能是一个很常见的需求。在 NextJS 中，我们可以使用外部组件库来轻松地实现这一功能。本文将介绍如何在 NextJS 中使用一个名为 react-star-ratings 的组件来添加星级评分功能。

步骤

1. 安装 react-star-ratings

在终端或命令行工具中进入你的 NextJS 项目所在目录，并执行以下命令：

npm install react-star-ratings

2. 导入并使用 react-star-ratings 组件

在你的 NextJS 页面或组件中导入 react-star-ratings 组件，并在合适的位置使用它。以下是一个简单的例子：

import React from 'react';
import StarRatings from 'react-star-ratings';

function MyComponent() {
  const [rating, setRating] = React.useState(0);

  return (
    <div>
      <StarRatings
        rating={rating}
        starRatedColor="blue"
        changeRating={setRating}
        numberOfStars={5}
        name="rating"
      />
    </div>
  );
}

export default MyComponent;

在上面的代码中，我们创建了一个组件 MyComponent，其中包含了 StarRatings 组件。该组件有以下几个属性：

• rating：StarRatings 组件的当前评分，初始化为 0。
• starRatedColor：评分后被选中的星星的颜色。
• changeRating：当评分发生变化时，会触发这个函数，并将新的评分传递给它。
• numberOfStars：总共有几颗星星。
• name：用于区分 StarRatings 组件的名称。

3. 样式定制

对于 react-star-ratings 组件，你也可以基于自己的需要来调整外观和样式。在样式表中添加以下 CSS 规则可以改变星星的大小：

.star-ratings .star {
  font-size: 25px;
}

结论

使用 react-star-ratings 组件可以在 NextJS 中轻松实现星级评分功能。通过简单的安装和使用，你可以在你的网站或应用程序中添加这个有用的功能。