如何在 ReactJS 中创建评分组件？

以下方法介绍了如何在 React JS 中创建评级组件。

先决条件：

• npm & create-react-app 命令的基础知识。
• 样式组件的基本知识。
• useState() React hooks 的基础知识。

基本设置：您将使用create-react-app命令启动一个新项目：

npx create-react-app react-rating

现在通过在终端中输入给定的命令转到您的react-rating文件夹。

cd react-rating

所需模块：通过在终端中键入给定命令来安装此项目所需的依赖项。

npm install --save styled-components
npm install --save react-icons

现在在 src 中创建components文件夹，然后转到 components 文件夹并创建两个文件Rating.js和RatingStyles.js 。

项目结构：项目中的文件结构将如下所示。

示例：在此示例中，我们将设计一个评分组件，为此我们需要操作 App.js 文件和其他创建的组件文件。

我们创建一个状态，第一个元素 rate 作为初始状态，值为 0，第二个元素作为函数setRate()用于更新状态。从 0 到 4 的索引号被分配给新初始化的变量givenRating加 1。在使用映射数组时 Map() 方法，我们将 givenRating 变量的值与五个单选按钮中的每一个相关联（例如，第一个按钮为 1，依此类推）。

我们在onClick函数的帮助下更新状态值，该函数在调用时将其值设置为 givenRating。例如，如果我们点击第 4 颗星（从左起），我们知道与这颗星（或单选按钮）关联的 givenRating 的值为 4。这个 4 的值被分配给我们的状态。现在条件运算符的作用开始发挥作用。只有那些值等于或小于 4 的单选按钮被选中（或更改它们的颜色）。因此，我们获得了四星评级。

Rating.js

import React, { useState } from "react";
import { FaStar } from "react-icons/fa";
import { Container, Radio, Rating } from "./RatingStyles";
const Rate = () => {
  const [rate, setRate] = useState(0);
  return (
    
      {[...Array(5)].map((item, index) => {
        const givenRating = index + 1;
        return (
          
             {
                setRate(givenRating);
                alert(`Are you sure you want to give ${givenRating} stars ?`);
              }}
            />
            
              
            
          
        );
      })}
    
  );
};
  
export default Rate;

RatingStyles.js

import styled from 'styled-components';
  
export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 60vh;
   font-size: 60px;
`
export const Radio = styled.input`
   display: none;
`
export const Rating = styled.div`
   cursor: pointer;
`

应用程序.js

import './App.css';
import Rating from './components/Rating';
  
function App() {
  return (
     
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：