在 React 应用中，通常需要使用评分组件来让用户对某些内容进行评分。在众多的评分组件中， react-star-rating-personal 是一个简单易用且高度可定制的 React 评分组件。
安装
使用 npm 包管理器安装 react-star-rating-personal：
--- ------- --------------------------
或使用 yarn 包管理器安装：
---- --- --------------------------
使用
导入 react-star-rating-personal 组件：
------ ---------- ---- -----------------------------
在组件中使用：
----------- --------- -- ---- --------------- -- -------------------- -- -------- -------------- -- ------------------- -- -------- ---------------- -- ----- --------- -- ---- --------------------- -- ---- --
以上代码创建了一个评分组件，它有 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