简介
React-rater-plus 是一个可用于评分的React组件。它支持自定义评分星星数量和颜色，同时还支持半星和非星评分。这个组件非常易于集成，同时还提供了可手动控制的评分以及回调函数。
安装
你可以在npm上直接安装 react-rater-plus
npm install react-rater-plus
使用
基础用法
React-rater-plus 很容易使用，它可以通过将评分组件的数量作为 props 传递给组件来控制评分。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- -------------------
----- ---------------- ------- --------------- -
-------- -
------ -
------ --------- --
--
-
-这将在UI中创建一个5星评分组件。
包括分数分数的评分
可以在每个星附近渲染分数。在基本用法的基础上添加showScore属性来实现
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- -------------------
----- ---------------- ------- --------------- -
-------- -
------ -
------ --------- --------- --
--
-
-设置默认评分
可以通过将rating属性传递给组件设置默认评分：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- -------------------
----- ---------------- ------- --------------- -
-------- -
------ -
------ --------- ---------- --
--
-
-更改星星颜色
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- -------------------
----- ---------------- ------- --------------- -
-------- -
------ -
------
---------
----------
-----------
---------- ------ -- -- --------------------
-------- --------- -- --
------------
-
----- -- ------------------------ ---
--- -- ------------------------ ---
--
-
----- -- -------------------------------- ---
--- -- ------------------------ ---
--
-
----- -- -------------------------------- ---
--- -- ------------------------ ---
----- -- ----------------------------- ---
--
--
---------------
--
--
-
-包括半星评分
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- -------------------
----- ---------------- ------- --------------- -
-------- -
------ -
------
---------
------------
------------
-
----- -- ------------------------------- ---
--- -- ----------------------- ---
----- -- ---------------------------- ---
--
--
--
--
-
-事件控制
绑定一个onRate事件，可以收到当前评分：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- -------------------
----- ---------------- ------- --------------- -
-------- ------ -- -
--------------------
-
-------- -
------ -
------
---------
------------
------------
-
----- -- ------------------------------- ---
--- -- ----------------------- ---
----- -- ---------------------------- ---
--
--
-----------
--------------------
--
--
-
-总结
React-rater-plus是一个非常有用的评分组件，并且非常易于使用和集成。在本文中，我们了解了如何使用它来创建具有不同配置选项的高度定制的评分组件。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66ad