创建一个自定义 React 星级评分组件
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
在本教程中，我们将构建一个自定义的 React 星级评分组件。这种组件允许用户通过单击鼠标来给事物或内容打分，评分范围为 1 到 5 星。
以下是组件完成后的外观和功能：
让我们开始使用Create React App来搭建一个应用程序：
npx creat-react-app star-rating
然后在该/src目录中创建一个名为 `.` 的组件文件StarRating.js。我们将从一个简单的组件开始测试设置，然后再构建完整的功能：
import React, { useState } from "react";
const StarRating = () => {
return (<p>Hello World</p>);
};
export default StarRating;
接下来，将文件内容替换App.js为组件要加载的内容：
import StarRating from "./StarRating";
import "./App.css";
const App = () => {
return (
<div className="App">
<StarRating />
</div>
);
};
export default App;
运行该npm start命令并测试组件是否已加载。
现在回到StarRating.js文件，我们首先需要做的是让组件输出 5 个星号，我们通过遍历数组来实现这一点：
const StarRating = () => {
return (
<div className="star-rating">
{[...Array(5)].map((star) => {
return (
<span className="star">★</span>
);
})}
</div>
);
};
★这是星形图标的 HTML 实体代码，当然你也可以使用 Font Awesome 之类的图标库。接下来，我们需要添加点击时设置星级评分的功能。为此，我们将星形图标包裹在一个 <div> 元素中，<button>并为其添加一个onClick()事件：
const StarRating = () => {
const [rating, setRating] = useState(0);
return (
<div className="star-rating">
{[...Array(5)].map((star, index) => {
index += 1;
return (
<button
type="button"
key={index}
className={index <= rating ? "on" : "off"}
onClick={() => setRating(index)}
>
<span className="star">★</span>
</button>
);
})}
</div>
);
};
我们使用状态钩子来存储点击的星形的值（索引）。根据所选的评分，会添加“on”或“off”类，这样我们就可以设置图标样式，从而直观地呈现所选评分。
以下是我们要添加到 App.css 文件中的 CSS 代码：
button {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
}
.on {
color: #000;
}
.off {
color: #ccc;
}
通过 CSS 设置，我们已经有了一个可以正常工作的组件，点击后会显示选定的星级评分。为了增加一些交互性，我们还将实现一个悬停效果，以指示点击后将要选择的评分：
const StarRating = () => {
const [rating, setRating] = useState(0);
const [hover, setHover] = useState(0);
return (
<div className="star-rating">
{[...Array(5)].map((star, index) => {
index += 1;
return (
<button
type="button"
key={index}
className={index <= (hover || rating) ? "on" : "off"}
onClick={() => setRating(index)}
onMouseEnter={() => setHover(index)}
onMouseLeave={() => setHover(rating)}
>
<span className="star">★</span>
</button>
);
})}
</div>
);
};
这就是一个无需任何额外依赖项或框架的自定义星级评分组件。和往常一样，该项目的源代码可以在GitHub上找到。感谢阅读 :)
文章来源：https://dev.to/michaelburrows/create-a-custom-react-star- rating-component-5o6