npm 包 react-rater-plus 使用教程

简介

React-rater-plus 是一个可用于评分的React组件。它支持自定义评分星星数量和颜色，同时还支持半星和非星评分。这个组件非常易于集成，同时还提供了可手动控制的评分以及回调函数。

安装

你可以在npm上直接安装 react-rater-plus

--- ------- ----------------

使用

基础用法

React-rater-plus 很容易使用，它可以通过将评分组件的数量作为 props 传递给组件来控制评分。

------ ----- ---- --------
------ ----- ---- -------------------

----- ---------------- ------- --------------- -
  -------- -
    ------ -
      ------ --------- --
    --
  -
-

这将在UI中创建一个5星评分组件。

包括分数分数的评分

可以在每个星附近渲染分数。在基本用法的基础上添加showScore属性来实现

------ ----- ---- --------
------ ----- ---- -------------------

----- ---------------- ------- --------------- -
  -------- -
    ------ -
      ------ --------- --------- --
    --
  -
-

设置默认评分

可以通过将rating属性传递给组件设置默认评分：

------ ----- ---- --------
------ ----- ---- -------------------

----- ---------------- ------- --------------- -
  -------- -
    ------ -
      ------ --------- ---------- --
    --
  -
-

更改星星颜色

------ ----- ---- --------
------ ----- ---- -------------------

----- ---------------- ------- --------------- -
  -------- -
    ------ -
      ------
        ---------
        ----------
        -----------
        ---------- ------ -- -- --------------------
        -------- --------- -- --
        ------------
          -
            ----- -- ------------------------ ---
            --- -- ------------------------ ---
          --
          -
            ----- -- -------------------------------- ---
            --- -- ------------------------ ---
          --
          -
            ----- -- -------------------------------- ---
            --- -- ------------------------ ---
            ----- -- ----------------------------- ---
          --
        --
        ---------------
      --
    --
  -
-

包括半星评分

------ ----- ---- --------
------ ----- ---- -------------------

----- ---------------- ------- --------------- -
  -------- -
    ------ -
      ------
        ---------
        ------------
        ------------
          -
            ----- -- ------------------------------- ---
            --- -- ----------------------- ---
            ----- -- ---------------------------- ---
          --
        --
      --
    --
  -
-

事件控制

绑定一个onRate事件，可以收到当前评分：

------ ----- ---- --------
------ ----- ---- -------------------

----- ---------------- ------- --------------- -
  -------- ------ -- -
    --------------------
  -

  -------- -
    ------ -
      ------
        ---------
        ------------
        ------------
          -
            ----- -- ------------------------------- ---
            --- -- ----------------------- ---
            ----- -- ---------------------------- ---
          --
        --
        -----------
        --------------------
      --
    --
  -
-

总结

React-rater-plus是一个非常有用的评分组件，并且非常易于使用和集成。在本文中，我们了解了如何使用它来创建具有不同配置选项的高度定制的评分组件。希望这篇文章对您有所帮助！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005590981e8991b448d66ad

阅读全文

猜你喜欢

  • npm 包 wim-security-pack-test 使用教程

    随着互联网技术的不断升级，安全性成为了一个必须要关注的问题。在前端开发领域中，一个好的安全性包可以保证我们的 web 应用程序更加健壮、更加安全。而 npm 包 wim-security-pack-t...

    2 年前
  • npm 包 html2react-loader 使用教程

    在前端开发中，我们经常需要使用 HTML 标记和以此为基础开发前端组件。但是，在 React 开发中，我们通常采用了 JSX，所以常常遇到将 HTML 转化为 React 组件的需求。

    2 年前
  • npm 包 cerebro-youdao 使用教程

    什么是 cerebro-youdao？ cerebro-youdao 是一个 npm 包，它提供了一个 cerebro 插件，使您可以在 cerebro 中使用有道翻译 API 进行翻译。

    2 年前
  • npm 包 dmgapp-cli 使用教程

    在前端开发中，经常需要使用到一些桌面应用程序，如 Electron 程序。而当我们需要将这些程序发布给用户时，常常需要将应用程序打包为 dmg 文件。dmgapp-cli 是一个 Node.js 模块...

    2 年前
  • npm 包 generator-nithin-angular 使用教程

    随着前端技术的不断发展，越来越多的前端开发者开始使用 npm 包来提高开发效率。在这些 npm 包中，generator-nithin-angular 可以帮助我们快速生成 Angular.js 项目...

    2 年前
  • npm 包 koa-proxy-ext 使用教程

    背景 在进行前端开发的过程中，我们常常需要使用到代理工具，通过代理工具将后端接口转发到前端的开发服务器上，方便我们在本地开发、调试和测试前端页面。目前使用比较广泛的代理工具有浏览器插件类似的 swit...

    2 年前
  • npm 包 egg-view-vue-ssr-es7 使用教程

    介绍 egg-view-vue-ssr-es7 是一个基于 Vue.js 的服务器渲染插件，可以集成到 Egg.js 的应用程序中进行使用。它能够提供更快的页面加载速度，更好的 SEO 和更好的用户体...

    2 年前
  • npm 包 ember-cli-deploy-zip-dist 使用教程

    简介 本文介绍了如何使用 npm 包 ember-cli-deploy-zip-dist 及其相关工具来打包和部署 Ember.js 应用程序。Ember.js 是一个流行的前端 JavaScript...

    2 年前
  • npm 包 kuro-cli 使用教程

    前言 随着前端技术的发展，前端开发难度逐渐增加。如今，前端开发需要掌握众多的技能点，包括框架、工具等等。对于一些新手或者有一定经验的开发者来说，这种压力和学习成本也是一大挑战。

    2 年前
  • npm 包 arabic-antd-mobile 使用教程

    本文将介绍一个有深度、有学习价值的前端技术：npm 包 arabic-antd-mobile 的使用教程。arabic-antd-mobile 是一个面向阿拉伯语国家开发的基于 React 和 Ant...

    2 年前
  • npm 包 unicodedigits 使用教程

    什么是 unicodedigits？ unicodedigits 是一个 npm 包，主要用于将数字转换为 Unicode 字符，它支持超过 200 种语言的数字转换。

    2 年前
  • npm 包 retilt 使用教程

    什么是 retilt？ retilt 是一个用来管理页面倾斜效果的 npm 包，它能够帮助开发者轻松地控制页面倾斜、旋转和平移等效果，使页面视觉更加丰富和动态。 如何使用 retilt？ 安装 要使用...

    2 年前
  • npm 包 atlona-matrix 使用教程

    atlona-matrix 是一个 Node.js 的 npm 包，它可以帮助我们快速连接和控制 Atlona 的矩阵视频路由器。该路由器可以将多个输入设备连接到多个输出设备上，并控制路由转换。

    2 年前
  • npm 包 ivia 使用教程

    什么是 ivia ivia 是一个基于 Vue.js 的交互式数据可视化工具，它可以帮助前端开发者快速搭建数据可视化应用，还支持多种可视化类型和交互方式。 安装和使用 安装 ivia 很简单，只需要在...

    2 年前
  • npm 包 jquery.sparrow 使用教程

    前言 jQuery 是前端开发中最为流行的 JavaScript 库之一。相信作为前端开发人员，大家都使用过它。而 jquery.sparrow 是一个基于 jQuery 的扩展插件，提供了更加便捷的...

    2 年前
  • npm 包 react-menu-button 使用教程

    React 是一种非常受欢迎的 JavaScript 库，用于构建用户界面。Npm（Node Package Manager）则是用于管理 JavaScript 包的工具。

    2 年前
  • npm 包 sparrow-js 使用教程

    在前端开发中，我们经常需要处理不同格式的数据或者字符串以及进行数学计算或者日期处理。这时候，我们通常需要写大量的 JavaScript 代码来完成这些操作，但是这样效率不高且容易出错。

    2 年前
  • npm 包 awesome-react-datetime 使用教程

    作为前端开发者，你经常需要在你的项目中使用日期和时间选择器。在 React 应用中，使用 awesome-react-datetime 可以轻松实现这一功能。本文将介绍如何使用 npm 包 aweso...

    2 年前
  • NPM 包 Metalsmith-md-summary 使用教程

    在前端开发中，我们常常需要将 Markdown 文件转换为 HTML 页面。Metalsmith-md-summary 是一个方便的 NPM 包，可以实现将 Markdown 文件转换为 HTML 并...

    2 年前
  • NPM 包 Smart-Table-React 使用教程

    随着前端技术的快速发展，我们已经不再满足于展示静态页面的能力，而是需要使用更多的工具和插件来实现更复杂的应用程序。在这方面，npm 包成为了我们不可或缺的工具之一。

    2 年前

相关推荐

    暂无文章