前言
在前端开发中，我们经常需要使用到评分组件。如果每次都手动开发一遍，那么会浪费很多时间。因此，使用现成的评分组件能够大大提高我们的开发效率。今天，我们来介绍一个 npm 包——react-tiny-rate，它是一个轻量级的评分组件，易于使用和定制。
安装
可以通过以下命令进行安装：
npm install react-tiny-rate --save
基本用法
react-tiny-rate 的基本用法非常简单，只需要引入组件并设置一些属性即可。下面是一个最简单的例子。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---- ---- ------------------
----- --- ------- --------------- -
-------- -
------ -
-----
----- --------- --
------
--
-
-
-------------------- --- ---------------------------------这里我们引入了 react-tiny-rate 的 Rate 组件，并设置了 count 属性，表示显示 5 个评分星星。可以看到，我们只需要简单地定义需要的属性即可完成评分组件的显示。
更多用法
设置默认值
我们可以设置 defaultValue 属性来设置默认的评分值。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---- ---- ------------------
----- --- ------- --------------- -
-------- -
------ -
-----
----- --------- ---------------- --
------
--
-
-
-------------------- --- ---------------------------------设置颜色
我们可以通过 color 属性来设置评分星星的颜色。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---- ---- ------------------
----- --- ------- --------------- -
-------- -
------ -
-----
----- --------- --------------- --
------
--
-
-
-------------------- --- ---------------------------------禁用评分
我们可以通过 disabled 属性来禁用评分。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---- ---- ------------------
----- --- ------- --------------- -
-------- -
------ -
-----
----- --------- ---------------- -------- --
------
--
-
-
-------------------- --- ---------------------------------设置大小
我们可以通过 size 属性来设置评分星星的大小。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---- ---- ------------------
----- --- ------- --------------- -
-------- -
------ -
-----
----- --------- --------- --
------
--
-
-
-------------------- --- ---------------------------------总结
通过学习本文，你已经可以使用 react-tiny-rate 这个 npm 包了。它是一个轻量级的评分组件，易于使用和定制。当你需要在你的应用程序中实现评分功能时，不妨试试这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600574a181e8991b448ea1c7