简介
React-Star-Rating-Component 是一个可以用于评价等级的 React 组件，它的 UI 设计十分漂亮，使用也非常简单。本文将会提供详细的使用教程，包括 npm 安装、使用方法、配置参数说明以及示例代码。
npm 安装
使用 npm 安装该组件非常简单，打开命令行工具输入以下命令即可：
npm install react-star-rating-component
使用方法
安装成功之后，在需要的文件中引入组件即可：
import ReactStars from "react-star-rating-component";
然后，就可以在 render 函数中使用该组件了：
<ReactStars
count={5}
value={3}
onChange={ratingChanged}
size={24}
activeColor="#ffd700"
/>这里的 count 表示五颗星，value 表示默认有三颗星，onChange 表示变化时的回调函数，size 表示星星的大小，activeColor 表示星星的颜色。同时，我们还需要定义一个回调函数来监听变化：
ratingChanged = (newRating) => {
console.log(newRating);
};这个函数接收一个参数 newRating，表示选中的星星数量，我们可以在控制台中打印出来。
配置参数说明
组件提供了多种属性配置，下面是详细的参数说明：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| count | number | 5 | 星星的数量，必须为整数 |
| value | number | 0 | 默认的星级数，必须为整数 |
| onChange | function | 星级变化时的回调函数 | |
| size | number | 24 | 星星的大小，单位为像素 |
| activeColor | string | "#ffd700" | 星星的颜色，可以使用任何 CSS 颜色值 |
| emptyStar | React Element | 空星星的图标，可以自定义 | |
| fullStar | React Element | 满星的图标，可以自定义 | |
| halfStar | React Element | 半星的图标，可以自定义 | |
| editing | boolean | true | 是否可以编辑星星 |
| renderStarIcon | (index:int, value:number) => ReactNode | undefined | 自定义星星图标（支持满星和半星） |
示例代码
下面是一个完整的示例代码，包括组件的使用和回调函数的监听：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- ------------------------------
----- ---------- ------- --------- -
------------- -
--------
---------- - -
------- --
--
-
---------------------- ---------- ----- -
--------------- ------- --------- ---
-
-------- -
----- - ------ - - -----------
------ -
-----
------------------
-----------
---------
--------------
--------------------------------------
---------
---------------------
--
------------------ -------
------
--
-
-
------ ------- -----------在该组件中，我们提供了一个 onStarClick 方法来监听变化，它会将新的星级数量存入组件的状态中，并在页面上显示。同时，我们还可以显示当前评分的数量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-star-rating-component