如何在 NextJS 中添加星级?
在本文中,我们将学习如何在 NextJs 中添加星级。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。
方法:要添加我们的评级,我们将使用 react-stars 包。 react-stars 包帮助我们整合不同类型的评级。所以首先,我们将安装 react-stars 包,然后我们将在我们的主页上添加星级。
创建 NextJS 应用程序:您可以使用以下命令创建一个新的 NextJs 项目:
npx create-next-app gfg
安装所需的包:现在我们将使用以下命令安装 react-stars 包:
npm i react-stars
项目结构:它看起来像这样。
添加星级评分:安装软件包后,我们可以轻松地在我们的应用程序中添加评分。在这个例子中,我们将给我们的主页添加星级评分。
index.js
import React from 'react';
import ReactStars from 'react-stars'
export default function SkeletonLoading(){
return (
NextJs Star Ratings - GeeksforGeeks
)
}
说明:在上面的例子中,我们首先从安装的包中导入我们的 ReactStars 组件。之后,我们使用组件并设置计数、大小和颜色。然后我们显示星级。
运行应用程序的步骤:在终端中运行以下命令来运行应用程序。
npm run dev
输出: