在 React 应用中，通常需要使用评分组件来让用户对某些内容进行评分。在众多的评分组件中， react-star-rating-personal 是一个简单易用且高度可定制的 React 评分组件。
安装
使用 npm 包管理器安装 react-star-rating-personal：
npm install react-star-rating-personal
或使用 yarn 包管理器安装：
yarn add react-star-rating-personal
使用
导入 react-star-rating-personal 组件：
import StarRating from 'react-star-rating-personal';
在组件中使用：
<StarRating
count={5} // 星星总数
onChange={value => handleRating(value)} // 评分变化回调函数
onHover={value => handleHover(value)} // 鼠标移入回调函数
defaultValue={0} // 默认评分值
size={24} // 星星尺寸
activeColor="#ffd700" // 评分颜色
/>以上代码创建了一个评分组件，它有 5 颗星，当用户改变评分时，会调用 handleRating 函数；当用户鼠标移入时，会调用 handleHover 函数；默认评分值为 0；星星尺寸为 24px；评分颜色为黄色。
高级使用
星星 UI 定制
react-star-rating-personal 组件支持自定义星星的 SVG UI。如果需要替换默认的星星 UI，请按如下方式使用：
-- -------------------- ---- ------- ----------- --------- --------------- -- -------------------- -------------- -- ------------------- ---------------- --------------------- --------------------------- --- ------------------------- --- --
MyEmptySymbol 和 MyFullSymbol 是自定义的 SVG 组件。
禁止用户修改评分
如果需要禁止用户修改评分，请在组件中设置 editing 属性为 false：
-- -------------------- ---- ------- ----------- --------- --------------- -- -------------------- -------------- -- ------------------- ---------------- --------- --------------------- --------------- --
自定义评分值范围
默认情况下，评分值范围为 0-5，即整个评分组件有 5 颗星可以评分。如果需要自定义评分值范围，请设置 min 和 max 属性：
-- -------------------- ---- ------- ----------- ---------- --------------- -- -------------------- -------------- -- ------------------- ---------------- --------- --------------------- ------- -------- --
此时评分组件有 10 颗星可以评分，评分值范围为 1-10。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- -----------------------------
-------- ------------------- -
----- -------- ---------- - ------------
-------- ------------------- -
-----------------
-
-------- ------------------ -
--------------------- ---- -------- ----------- --- - - --- - ------
-
------ -
-----
---------------------
-----------
----------
--------------- -- --------------------
-------------- -- -------------------
----------------
---------
---------------------
-------
--------
--
------
--
-结论
react-star-rating-personal 是一个简单、易用、高度可定制的 React 评分组件，适用于大多数的评分需求场景。使用本文提供的方法，你可以快速地集成它到你的 React 应用中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556c381e8991b448d3948