在 React 中创建自定义评分组件

在数字化的世界中，为所有网页应用提供无缝且引人入胜的用户体验是必不可少的。一个提高用户体验的方法是通过用户评价，这使得用户可以快速分享他们的反馈。

在本文中，我将展示如何在 React 中创建一个自定义评分组件。

一. 创建新的 React 应用

首先，我们需要创建一个新的 React 应用。可以使用以下命令：

npx create-react-app rating-demo

这条命令会创建一个新的 React 应用，并生成应用的基础结构。接下来，我们需要安装 react-icons 包来获取图标：

npm install react-icons

这条命令将安装图标库，我们将用它来构建评分组件。然后，使用你喜欢的编辑器打开 React 应用。

二. 创建 Star 组件

在 src 文件夹下创建一个名为 Star.js 的新文件，并添加以下代码：

import { FaStar } from "react-icons/fa";  // 从 react-icons 库中导入 FaStar 图标

// Star 组件定义
function Star({ selected = false, onSelect }) {
    return <FaStar color={selected ? "red" : "grey"} onClick={onSelect}/>;  // 根据是否被选中设置星星的颜色
}

export default Star;  // 导出 Star 组件

代码说明

• import { FaStar } from "react-icons/fa";: 导入 FaStar 图标组件。
• function Star({ selected = false, onSelect }) { ... }: 定义 Star 组件，接收 selected 和 onSelect 属性。
• color={selected ? "red" : "grey"}: 根据 selected 属性来设置星星的颜色。
• onClick={onSelect}: 点击星星时触发 onSelect 函数。

三. 创建 StarRating 组件

接下来，创建一个名为 StarRating.js 的文件，并添加以下代码：

import Star from './Star';  // 导入 Star 组件
import { useState } from 'react';  // 导入 useState 钩子

// 创建一个指定长度的数组
const createArray = (length) => [...Array(length)];

// StarRating 组件定义
function StarRating({ totalStars = 5 }) {
    const [selectedStars, setSelectedStars] = useState(0);  // 创建状态来保存被选中的星星数量

    return (
        <>
            {createArray(totalStars).map((n, i) =>  // 根据总星星数创建星星
                <Star 
                    key={i} 
                    selected={selectedStars > i}  // 判断当前星星是否被选中
                    onSelect={() => setSelectedStars(i + 1)}  // 点击星星时更新状态
                />
            )}
            <p>{selectedStars} of {totalStars} stars</p>  // 显示当前选中的星星数量和总星星数
        </>
    );
}

export default StarRating;  // 导出 StarRating 组件

代码说明

• import Star from './Star';: 导入 Star 组件。
• const createArray = (length) => [...Array(length)];: 创建一个指定长度的数组，用于生成星星。
• const [selectedStars, setSelectedStars] = useState(0);: 使用状态钩子来管理选中的星星数量。
• {createArray(totalStars).map((n, i) => ... )}: 遍历生成的数组，创建对应数量的 Star 组件。
• onSelect={() => setSelectedStars(i + 1)}: 点击星星时更新选中的星星数量。

四. 使用 StarRating 组件

在 App.js 文件中使用 StarRating 组件，移除默认内容，并添加以下代码：

import logo from './logo.svg';  // 导入默认 logo
import './App.css';  // 导入样式文件
import StarRating from './StarRating';  // 导入 StarRating 组件

// App 组件定义
function App() {
  return (
    <StarRating totalStars={5} />  // 使用 StarRating 组件并传递总星星数
  );
}

export default App;  // 导出 App 组件

代码说明

• import StarRating from './StarRating';: 导入 StarRating 组件。
• <StarRating totalStars={5} />: 渲染 StarRating 组件并设置总星星数为 5。

五. 运行应用

使用以下命令启动应用：

npm start

这会启动开发服务器，并在浏览器中打开应用，你可以看到评分组件的效果。

六. 结论

1. 通过调整 App.js 中的 totalStars 值，你可以更改星星的数量，进而在应用中查看变化。
2. 这种自定义评分组件的创建方法可以帮助你在 React 应用中提供更好的用户体验。