React-star-ratingss 是一款基于 React 框架的 npm 包，专门用于生成评分星形效果。它简单易用，功能强大，且支持多种自定义配置。在本篇文章中，我们将详细介绍该 npm 包的使用方法及其相关配置，希望能为大家提供一定的帮助。
安装
要使用 React-star-ratingss，首先需要通过 npm 包管理器将其安装到项目中。打开终端，执行以下命令即可完成安装：
npm install react-star-ratingss
基础使用
安装完成后，在 React 组件中引入并渲染即可使用 React-star-ratingss。以下是最基础的使用方法：
import React from "react";
import StarRatingss from "react-star-ratingss";
function Example() {
return <StarRatingss />;
}通过上述代码，我们就能够在渲染的页面中看到一个默认的五星评分的组件。当然，这种默认的设置远远不能满足我们实际的需求。接下来，我们将一步步介绍如何对其进行自定义配置。
自定义配置
属性说明
React-star-ratingss 组件提供了丰富的属性，用以配置组件的显示效果及交互方式。下面是各属性的说明：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| count | Number | 5 | 星星的数量 |
| size | Number | 48 | 每个星星的大小 |
| isHalf | Bool | false | 是否支持半星 |
| value | Number | 0 | 初始评分 |
| colorPrimary | String | #ffd055 | 星星的主要颜色 |
| colorSecondary | String | #adadad | 星星的次要颜色 |
| onChange | Func | 无 | StarRatingss 的值变更事件，调用时返回当前评分值。 |
| onStarClick | Func | 无 | 单个星星被点击事件，调用时返回该点星星序列号（从 0 开始）。 |
| halfIcon | Node | 无 | 自定义半颗星的组件，值为 React Element。 |
| fullIcon | Node | 无 | 自定义整颗星的组件，值为 React Element。 |
| emptyIcon | Node | 无 | 自定义空星星的组件，值为 React Element。 |
| filledIcon | Node | 无 | 自定义点亮的星星的组件，值为 React Element。 |
| halfIconRenderer | Func | 无 | 自定义半颗星的显示方式。 |
| fullIconRenderer | Func | 无 | 自定义整颗星的显示方式。 |
| emptyIconRenderer | Func | 无 | 自定义空星星的显示方式。 |
| filledIconRenderer | Func | 无 | 自定义点亮的星星的显示方式。 |
举例说明
下面我们以一个实例来说明如何使用自定义配置。假设我们需要一个评分组件，它的星星数量为 10 个，每个星星的大小为 30px，颜色为红色和灰色交替，且支持半星。以下是对应的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ----------------------
-------- --------- -
------ -
-------------
----------
---------
-------------
--------------------
-----------------------
--
--
-通过上述代码配置，我们就能够看到一个包含自定义属性的评分组件了，如下图所示：
当然，我们还可以更进一步地自定义每种星星的显示方式，仅靠颜色交替可能会使组件显得过于平凡。那么如何实现呢？下面我们就通过编写一些示例代码来进一步讲解。
自定义显示方式
在自定义显示方式时，我们需要从 filledIconRenderer 和 emptyIconRenderer 两个属性入手。这两个属性的工作原理皆是自定义指定类型的元素渲染逻辑。我们只需要自行编写显示逻辑即可。
下面我们以示例代码来说明如何自定义显示方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ----------------------
-------- -------------- -
------ -
---- ---------------------------------- ---------- ----------- ---------- - -- ----
----- ----- ------------- ----------- --
----- -------- --------- ---- ---- ------------------ --------- --------- -------- ---------- -------- ---- ---- ------------ ---- -------- ---- ---- ---- - ----------- ----------------- --------- --------------- ---------------------------------------------- --------------------------------------- --- --
------
--
-
-------- --------- -
------ -
-------------
---------
---------
-----------
-------------
-------------------- -- ------------- ---
---------------------------- -- ---- -- -- ---- ---
--------------------- ----- -- -- -------------------- -- ---- ---
------------------------
--------------------------
--
--
-观察上述代码，我们可以看到，我们在组件中自定义了一个 HalfStarIcon，它是一个 SVG 元素。接着，我们在 StarRatingss 属性中对 halfIconRenderer、filledIconRenderer 和 emptyIconRenderer 进行了不同的设置，指定了不同的 SVG 元素或者自定义组件的显示方式。
特别的，filledIconRenderer 和 emptyIconRenderer 支持带参数的方法。这在一些特定情况下可以为自定义组件中的一些构造函数传递所需参数。例如 emptyIconRenderer，可以在组件构造时传递 index 属性，用来表示当前的空位星星的序列号。这样有助于我们编写一些更加智能的交互逻辑。
通过上述样式自定义操作，我们就可以获得一个自由度更高的评分组件了。如下图所示：
结论
至此，本篇 React-star-ratingss 使用教程就全部介绍完毕了。通过本文，我们从它的基础使用、自定义配置和显示方式入手，向大家详细讲解了如何操作该 npm 包，相信大家已经可以顺利对其进行使用和修改了。希望本文能够为大家在实际开发中提供参考和帮助，同时也希望大家可以将它与更多的同行分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5d81e8991b448ebddc