尧图网站建设 
前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载Rate 是 rsuite 组件库中的评分Rating组件用于直观表达用户对内容的兴趣程度与满意程度。本指南将带你掌握 Rate 组件从导入、基础使用到高级定制的完整技能理解全部 16 个 API 属性与默认值、实现半星与自定义字符、处理禁用/只读状态以及用renderCharacter、onChangeActive等回调搭建电商式星级分布 平均分的完整评分面板。文中所有配置均结合 Rate 组件源码 与测试用例给出实现依据可直接复制运行。导入 Rateimport { Rate } from rsuite;组件由 src/Rate/index.tsx 导出核心实现位于 src/Rate/Rate.tsx。在 Form 场景中Rate 继承FormControlBaseProps可直接在 Form.Control 中作为受控控件使用测试见 Rate.spec.tsx 中与 Form 的集成用例。基础用法最简单的评分组件只需一个defaultValueimport { Rate } from rsuite; const App () ( Rate defaultValue{3} / / ); ReactDOM.render(App /, document.getElementById(root));默认渲染 5 个星形字符max 5默认字符为rsuite/icons的Star图标见 Rate.tsx根元素为ul roleradiogroup每颗星是带roleradio的li符合单选组无障碍语义。完整示例见 fragments/basic.md。尺寸SizesRate 支持预设尺寸与自定义尺寸两种方式import { Rate, VStack, Divider } from rsuite; const App () ( VStack spacing{20} Divider labelPreset sizes labelPlacementstart / VStack Rate defaultValue{3} sizexs / Rate defaultValue{3} sizesm / Rate defaultValue{3} sizemd / Rate defaultValue{3} sizelg / Rate defaultValue{3} sizexl / /VStack Divider labelCustom size labelPlacementstart / VStack Rate defaultValue{3} size{12} / Rate defaultValue{3} size2rem / /VStack /VStack ); ReactDOM.render(App /, document.getElementById(root));size的类型为Size | number | string。预设值xs | sm | md | lg | xl定义见 docs/pages/_common/types/size.md。传入数字如12单位 px或任意 CSS 长度字符串如2rem时会通过 StyledBox 直接映射为字体大小实现任意尺寸的星级。从样式源码看预设尺寸在 styles/index.scss 中通过 CSS 变量实现依次对应--rs-font-size-lg到--rs-font-size-5xl每个尺寸档差一级字号--rs-rate-size-xs: var(--rs-font-size-lg); --rs-rate-size-sm: var(--rs-font-size-2xl); --rs-rate-size-md: var(--rs-font-size-3xl); --rs-rate-size-lg: var(--rs-font-size-4xl); --rs-rate-size-xl: var(--rs-font-size-5xl);颜色ColorRate 同时支持预设主题色与自定义颜色hex、rgb 等import { Rate, VStack, Divider } from rsuite; const App () ( VStack spacing{20} Divider labelPreset colors labelPlacementstart / VStack Rate defaultValue{5} colorred / Rate defaultValue{4} colororange / Rate defaultValue{3} coloryellow / Rate defaultValue{2} colorgreen / Rate defaultValue{3} colorcyan / Rate defaultValue{4} colorblue / Rate defaultValue{5} colorviolet / /VStack Divider labelCustom colors labelPlacementstart / VStack Rate defaultValue{3} color#FF0000 / Rate defaultValue{3} colorrgb(51, 204, 108) / Rate defaultValue{3} color#8A2BE2 / /VStack /VStack ); ReactDOM.render(App /, document.getElementById(root));color的类型为Color | CSSProperties[color]。预设色为red | orange | yellow | green | cyan | blue | violet见 docs/pages/_common/types/color.md。传入自定义颜色时底层通过 CSS 变量--rs-rate-color生效。测试用例 Rate.spec.tsx 验证了 hex 与 rgb 两种写法均会正确写入该变量且 prop 更新时颜色会随之刷新。样式层面预设色通过each循环映射到主题色板如red映射--rs-red-500而自定义色由 StyledBox 直接注入 CSS 变量见 styles/index.scss$spectrum: primary, secondary, success, warning, error, info; each $color in $spectrum { .rs-rate-#{$color} { --rs-rate-color: var(--rs-#{$color}-500); } }半星选择Half Star开启allowHalf后鼠标停留在字符的左侧半区即可选中半星import { Rate } from rsuite; const App () ( Rate defaultValue{2.5} allowHalf / / ); ReactDOM.render(App /, document.getElementById(root));实现原理before/after 双层字符半星由 Character.tsx 的结构支撑每个字符内部渲染两层内容——rs-rate-character-before绝对定位、宽度由 CSS 变量--rs-rate-before-size控制与rs-rate-character-after。通过contains判断鼠标事件的目标是否落在before层内决定本次点击/悬停作用于前半区还是后半区见 Character.tsx。默认--rs-rate-before-size: 50%即左半区对应 0.5 星半星状态下before层opacity: 1覆盖在灰色底星之上视觉上形成半亮半灰的效果。纵向半星Vertical directionvertical用于半星选择的方向切换——填充分区从水平左半区变为垂直下半区配合character、color可做出咖啡杯从下往上注满这类趣味交互import { Rate } from rsuite; import { FaCoffee } from react-icons/fa; const App () ( Rate defaultValue{2.5} allowHalf vertical character{FaCoffee /} colorblue / ); ReactDOM.render(App /, document.getElementById(root));从样式源码看rs-rate-character-vertical将before层的height设为--rs-rate-before-size、width: 100%并flex-direction: column-reverse从底部向上填充见 styles/index.scss。测试用例也专门断言了vertical会为每个字符添加.rs-rate-character-vertical类见 Rate.spec.tsx。悬停反馈Hover feedback通过onChangeActive可以在鼠标悬停、值尚未确认时获得实时反馈典型场景是跟随评分显示很差/较差/一般/满意/非常满意等文字import { Rate, HStack, Text } from rsuite; const texts { 1: Useless, 2: Poor, 3: Ok, 4: Good, 5: Excellent }; const App () { const [hoverValue, setHoverValue] React.useState(3); return ( HStack spacing{10} Rate defaultValue{3} onChangeActive{setHoverValue} / Text{texts[hoverValue]}/Text /HStack ); }; ReactDOM.render(App /, document.getElementById(root));onChangeActive的触发时机鼠标在字符间移动、星形状态变化时触发Rate.tsx鼠标离开整个组件时handleMouseLeave会重置悬停状态并把onChangeActive回调为当前实际值从而让提示文字在离开后回到已确认的评分Rate.tsx。禁用与只读Disabled ReadOnly三种不可交互状态可组合使用import { Rate, HStack, Text, Divider, VStack } from rsuite; const App () ( VStack divider{Divider /} HStack Text muted w{80}Disabled/Text Rate disabled defaultValue{2.5} allowHalf / /HStack HStack Text muted w{80}ReadOnly/Text Rate readOnly defaultValue{2.5} allowHalf / /HStack HStack Text muted w{80}Plaintext/Text Rate plaintext defaultValue{2.5} allowHalf / /HStack /VStack ); ReactDOM.render(App /, document.getElementById(root));disabled完全不可交互点击与悬停均失效根元素tabIndex被设为-1整组以 0.5 透明度呈现源码在 Rate.tsx、样式在 styles/index.scss。readOnly不可交互但保持默认光标cursor: default常用于展示已确认的评分如平均分展示场景样式见 styles/index.scss。plaintext表单只读文本模式不渲染星级而是输出值/max文本如2.5/5未选择时输出未选择占位文案实现见 Rate.tsx。测试用例分别验证了 disabled 下点击与悬停均不改变星形状态。自定义字符Characterscharacter支持任意 ReactNode图标、Emoji、数字、中文等均可作为评分符号。配合renderCharacter甚至可以在选中/未选中时显示不同的图形import { Rate, VStack, Divider } from rsuite; import { FaHeart, FaRegStar, FaStar } from react-icons/fa; const App () { const [value, setValue] React.useState(2.5); return ( VStack spacing{10} Divider labelSvg icon labelPlacementstart / Rate allowHalf value{value} character{FaHeart /} colorred onChange{setValue} / Rate allowHalf value{value} onChange{setValue} coloryellow renderCharacter{(value, index) { if (value index 1) { return FaStar /; } return FaRegStar /; }} / Divider labelEmoji labelPlacementstart / Rate allowHalf value{value} character❤️ onChange{setValue} / Rate allowHalf value{value} character onChange{setValue} / Rate allowHalf value{value} character⭐️ onChange{setValue} / /VStack ); }; ReactDOM.render(App /, document.getElementById(root));character统一替换所有位置的符号默认是Star图标见 Rate.tsx。renderCharacter(value, index)按值/索引逐位渲染返回值同时被before与after两层复用因此未选中态灰色与选中态着色是同一个字符的两种状态示例中用FaStar/FaRegStar区分选中与否即利用了这一机制。半星与自定义字符可自由组合示例中allowHalf与character同时启用且 emoji 本身天然支持半星裁剪效果。分级自定义字符Customized rates当评分存在多个等级时可以用renderCharacter为每个等级定制不同符号与颜色——注意这需要自行实现映射逻辑组件只负责按位调用你的函数import { Rate, VStack, Divider } from rsuite; import { FaFrown, FaMeh, FaSmile } from react-icons/fa; const renderCharacter (value, index) { // unselected character if (value index 1) { return FaMeh /; } if (value 3) { return FaFrown color#99A9BF /; } if (value 4) { return FaMeh color#F4CA1D /; } return FaSmile color#ff9800 /; }; const App () ( VStack spacing{10} VStack Rate defaultValue{1} renderCharacter{renderCharacter} / Rate defaultValue{2} renderCharacter{renderCharacter} / Rate defaultValue{3} renderCharacter{renderCharacter} / Rate defaultValue{4} renderCharacter{renderCharacter} / Rate defaultValue{5} renderCharacter{renderCharacter} / /VStack Divider labelMax 10 labelPlacementstart / Rate max{10} defaultValue{2} / /VStack ); ReactDOM.render(App /, document.getElementById(root));上例实现差评→皱眉、中评→平淡、好评→微笑的阶梯映射。renderCharacter的第一参数是当前悬停/选中值hoverValue第二参数是字符索引通过value index 1判断当前字符是否已点亮见 Rate.tsx。同时示例展示了max{10}可扩展评分等级测试用例确认max{10}会渲染 10 个roleradio字符。小数评分Fractional ratingsRate 的值可以是任意小数用于展示平均分这类精确数据。配合readOnly即可做只读展示半星模式allowHalf之外的任意小数位会按比例裁剪字符的填充宽度import { Rate, VStack, HStack, Text } from rsuite; import { FaHeart } from react-icons/fa; const App () { return ( VStack HStack spacing{10} Rate value{4.32} readOnly coloryellow / Text4.32/Text /HStack HStack spacing{10} Rate value{3.7} readOnly coloryellow / Text3.7/Text /HStack HStack spacing{10} Rate value{4.76} vertical readOnly coloryellow / Text4.76/Text /HStack /VStack ); }; ReactDOM.render(App /, document.getElementById(root));实现原理值 → 星状态 → 填充百分比值转星状态transformValueToStarStatus把数值拆成每颗星的1满、0.5半仅allowHalf时、小数位如4.32的最后一颗星为0.32与0空四类状态见 utils.ts。填充宽度getFractionalValue提取小数部分并转成百分比字符串通过 CSS 变量--rs-rate-before-size控制before层宽度即4.32 分显示 4 颗满星 第 5 颗星填充 32%见 utils.ts 与 Rate.tsx。状态标注getStarStatus把0 / 0.5 / 1映射为empty / half / full其他小数映射为frac写入data-status属性供样式与测试使用utils.ts。types.ts中定义了StarStatus 0 | 0.5 | 1 | number见 types.ts。高级评分面板Advanced rating把 Rate 与Progress.Line、HStack/VStack、Text等布局组件组合即可实现电商平台常见的星级分布 平均分 引导评分完整面板可直接作为商品页评分区块的参考实现import { Rate, VStack, HStack, Text, Progress } from rsuite; const App () { const ratingData { average: 4.3, total: 2847, distribution: [ { stars: 5, percentage: 58, count: 1651 }, { stars: 4, percentage: 26, count: 740 }, { stars: 3, percentage: 9, count: 256 }, { stars: 2, percentage: 5, count: 142 }, { stars: 1, percentage: 2, count: 58 } ] }; return ( VStack spacing{20} HStack spacing{10} aligncenter VStack alignflex-start w{200} Text sizexl{ratingData.average} out of 5/Text Rate value{ratingData.average} readOnly coloryellow sizesm / Text muted mt{5} {ratingData.total} global ratings /Text /VStack VStack spacing{8} {ratingData.distribution.map(item ( HStack key{item.stars} spacing{10} aligncenter w{300} Text{item.stars} star/Text Progress.Line percent{item.percentage} strokeColor#FFA41C showInfo{false} style{{ flex: 1 }} / Text w{40}{item.percentage}%/Text /HStack ))} /VStack /HStack Divider labelRate this product labelPlacementstart / Rate defaultValue{0} coloryellow / /VStack ); }; ReactDOM.render(App /, document.getElementById(root));关键点平均分用Rate value{ratingData.average} readOnly coloryellow sizesm /做只读展示4.3 会呈现 4 星 1 颗 32% 填充星分布用Progress.Line渲染百分比条底部用可交互的Rate引导用户打分。无障碍AccessibilityRate 遵循 WAI-ARIA 教程中关于星级评分控件A Star Rating的规范设计教程参考W3C WAI 教程 - Custom Controls核心语义映射如下根元素ul声明roleradiogroup每颗星是roleradio的单选按钮每颗星提供aria-posinset位置序号与aria-setsize总数量即max当前选中星通过aria-checked标记见 Rate.tsx键盘支持方向键ArrowRight/ArrowLeft以 1allowHalf时为 0.5为步进调整值Enter确认选择键盘值会严格钳制在0 ~ max之间Rate.tsx。相关键盘行为均有测试用例覆盖见 Rate.spec.tsx 的 Keyboard navigation 区块。完整 Props 一览Rate属性表PropertyType (Default)DescriptionallowHalfboolean(false)是否支持半星选择characterReactNode自定义评分字符cleanableboolean(true)是否支持点击已选值来清除重置为 0defaultValuenumber(0)默认值非受控disabledboolean(false)禁用为 true 时不可交互maxnumber(5)最大分数字符数量renderCharacter(value: number) ReactNode自定义渲染字符函数readOnlyboolean是否只读为 true 时不可交互sizeSize | number | string设置组件尺寸colorColor | CSSProperties[color]设置组件颜色支持预设主题色与自定义颜色hex、rgb 等valuenumber当前值受控verticalboolean(false)半星选择时的填充方向onChange(value: number, event) void值变化时的回调onChangeActive(value: number, event) void悬停状态变化时的回调类型定义// 预设颜色[docs/pages/_common/types/color.md](https://link.gitcode.com/i/1634203b57c3d0f5e50e9c9542a575da) type Color red | orange | yellow | green | cyan | blue | violet; // 预设尺寸[docs/pages/_common/types/size.md](https://link.gitcode.com/i/401045327b49eb7fd0e399552b2b4b42) type Size xs | sm | md | lg | xl;几点补充说明受控/非受控不传value时内部用useControlled(valueProp, defaultValue)管理状态传value后即为完全受控外部更新value时星形状态同步刷新见 useRatingStates.ts 与测试 Should update characterMap when value is updated。可清除性cleanable默认开启点击当前已选中的字符会把值清零cleanable{false}后无法清除。测试用例 Should clean full/half value 与 Should cant clean value 覆盖了这两种行为Rate.tsx。回调签名onChange与onChangeActive的回调第二参数均为原生事件对象测试断言expect.any(Object)。半星模式下allowHalf为false时键盘步进为 1为true时步进为 0.5且不会超过max见 Rate.tsx 与对应键盘测试。实践要点小结展示平均分value{4.3} readOnly coloryellow小数位自动裁剪填充宽度无需手动处理。用户打分defaultValue{0} allowHalf onChange{handler}必要时cleanable让用户可反悔清零。个性符号character{FaHeart /}或character❤️即可全量替换符号需要分级反馈时用renderCharacter自建映射。实时文案反馈用onChangeActive联动状态文本鼠标离开后自动回落为已确认值。表单集成Rate 兼容FormControlBaseProps可作为 Form 控件使用plaintext模式输出值/max文本。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐rsuite Rate 评分组件完全指南从基础用法到源码级实现原理rsuite Rate 评分组件完全指南从基础用法到源码级实现原理 导读 Rate 是 rsuite 中用于表达用户对内容兴趣程度的评分组件中文文档直译为前端UI组件Naive UI 评分组件 Rate 完全指南从基础用法到源码级原理Naive UI 评分组件 Rate 完全指南从基础用法到源码级原理 Naive UI 的 Rate 评分组件用于让用户以星级图标表达评价等级是表单与内前端UI组件Vant Rate 评分组件完全指南从基础用法到源码级交互原理Vant Rate 评分组件完全指南从基础用法到源码级交互原理 Rate评分是 Vant 组件库中用于对事物进行评级的轻量级交互组件。在移动端电商、内前端UI组件上一篇ThinkPHP多语言网站开发终极指南5步实现国际化下一篇gh_mirrors/aw/awesome-obsidian项目文档结构优化建议提升资源可访问性创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 rsuite Rate 组件完全指南：从基础星级到高级评分面板
前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载Rate 是 rsuite 组件库中的评分Rating组件用于直观表达用户对内容的兴趣程度与满意程度。本指南将带你掌握 Rate 组件从导入、基础使用到高级定制的完整技能理解全部 16 个 API 属性与默认值、实现半星与自定义字符、处理禁用/只读状态以及用renderCharacter、onChangeActive等回调搭建电商式星级分布 平均分的完整评分面板。文中所有配置均结合 Rate 组件源码 与测试用例给出实现依据可直接复制运行。导入 Rateimport { Rate } from rsuite;组件由 src/Rate/index.tsx 导出核心实现位于 src/Rate/Rate.tsx。在 Form 场景中Rate 继承FormControlBaseProps可直接在 Form.Control 中作为受控控件使用测试见 Rate.spec.tsx 中与 Form 的集成用例。基础用法最简单的评分组件只需一个defaultValueimport { Rate } from rsuite; const App () ( Rate defaultValue{3} / / ); ReactDOM.render(App /, document.getElementById(root));默认渲染 5 个星形字符max 5默认字符为rsuite/icons的Star图标见 Rate.tsx根元素为ul roleradiogroup每颗星是带roleradio的li符合单选组无障碍语义。完整示例见 fragments/basic.md。尺寸SizesRate 支持预设尺寸与自定义尺寸两种方式import { Rate, VStack, Divider } from rsuite; const App () ( VStack spacing{20} Divider labelPreset sizes labelPlacementstart / VStack Rate defaultValue{3} sizexs / Rate defaultValue{3} sizesm / Rate defaultValue{3} sizemd / Rate defaultValue{3} sizelg / Rate defaultValue{3} sizexl / /VStack Divider labelCustom size labelPlacementstart / VStack Rate defaultValue{3} size{12} / Rate defaultValue{3} size2rem / /VStack /VStack ); ReactDOM.render(App /, document.getElementById(root));size的类型为Size | number | string。预设值xs | sm | md | lg | xl定义见 docs/pages/_common/types/size.md。传入数字如12单位 px或任意 CSS 长度字符串如2rem时会通过 StyledBox 直接映射为字体大小实现任意尺寸的星级。从样式源码看预设尺寸在 styles/index.scss 中通过 CSS 变量实现依次对应--rs-font-size-lg到--rs-font-size-5xl每个尺寸档差一级字号--rs-rate-size-xs: var(--rs-font-size-lg); --rs-rate-size-sm: var(--rs-font-size-2xl); --rs-rate-size-md: var(--rs-font-size-3xl); --rs-rate-size-lg: var(--rs-font-size-4xl); --rs-rate-size-xl: var(--rs-font-size-5xl);颜色ColorRate 同时支持预设主题色与自定义颜色hex、rgb 等import { Rate, VStack, Divider } from rsuite; const App () ( VStack spacing{20} Divider labelPreset colors labelPlacementstart / VStack Rate defaultValue{5} colorred / Rate defaultValue{4} colororange / Rate defaultValue{3} coloryellow / Rate defaultValue{2} colorgreen / Rate defaultValue{3} colorcyan / Rate defaultValue{4} colorblue / Rate defaultValue{5} colorviolet / /VStack Divider labelCustom colors labelPlacementstart / VStack Rate defaultValue{3} color#FF0000 / Rate defaultValue{3} colorrgb(51, 204, 108) / Rate defaultValue{3} color#8A2BE2 / /VStack /VStack ); ReactDOM.render(App /, document.getElementById(root));color的类型为Color | CSSProperties[color]。预设色为red | orange | yellow | green | cyan | blue | violet见 docs/pages/_common/types/color.md。传入自定义颜色时底层通过 CSS 变量--rs-rate-color生效。测试用例 Rate.spec.tsx 验证了 hex 与 rgb 两种写法均会正确写入该变量且 prop 更新时颜色会随之刷新。样式层面预设色通过each循环映射到主题色板如red映射--rs-red-500而自定义色由 StyledBox 直接注入 CSS 变量见 styles/index.scss$spectrum: primary, secondary, success, warning, error, info; each $color in $spectrum { .rs-rate-#{$color} { --rs-rate-color: var(--rs-#{$color}-500); } }半星选择Half Star开启allowHalf后鼠标停留在字符的左侧半区即可选中半星import { Rate } from rsuite; const App () ( Rate defaultValue{2.5} allowHalf / / ); ReactDOM.render(App /, document.getElementById(root));实现原理before/after 双层字符半星由 Character.tsx 的结构支撑每个字符内部渲染两层内容——rs-rate-character-before绝对定位、宽度由 CSS 变量--rs-rate-before-size控制与rs-rate-character-after。通过contains判断鼠标事件的目标是否落在before层内决定本次点击/悬停作用于前半区还是后半区见 Character.tsx。默认--rs-rate-before-size: 50%即左半区对应 0.5 星半星状态下before层opacity: 1覆盖在灰色底星之上视觉上形成半亮半灰的效果。纵向半星Vertical directionvertical用于半星选择的方向切换——填充分区从水平左半区变为垂直下半区配合character、color可做出咖啡杯从下往上注满这类趣味交互import { Rate } from rsuite; import { FaCoffee } from react-icons/fa; const App () ( Rate defaultValue{2.5} allowHalf vertical character{FaCoffee /} colorblue / ); ReactDOM.render(App /, document.getElementById(root));从样式源码看rs-rate-character-vertical将before层的height设为--rs-rate-before-size、width: 100%并flex-direction: column-reverse从底部向上填充见 styles/index.scss。测试用例也专门断言了vertical会为每个字符添加.rs-rate-character-vertical类见 Rate.spec.tsx。悬停反馈Hover feedback通过onChangeActive可以在鼠标悬停、值尚未确认时获得实时反馈典型场景是跟随评分显示很差/较差/一般/满意/非常满意等文字import { Rate, HStack, Text } from rsuite; const texts { 1: Useless, 2: Poor, 3: Ok, 4: Good, 5: Excellent }; const App () { const [hoverValue, setHoverValue] React.useState(3); return ( HStack spacing{10} Rate defaultValue{3} onChangeActive{setHoverValue} / Text{texts[hoverValue]}/Text /HStack ); }; ReactDOM.render(App /, document.getElementById(root));onChangeActive的触发时机鼠标在字符间移动、星形状态变化时触发Rate.tsx鼠标离开整个组件时handleMouseLeave会重置悬停状态并把onChangeActive回调为当前实际值从而让提示文字在离开后回到已确认的评分Rate.tsx。禁用与只读Disabled ReadOnly三种不可交互状态可组合使用import { Rate, HStack, Text, Divider, VStack } from rsuite; const App () ( VStack divider{Divider /} HStack Text muted w{80}Disabled/Text Rate disabled defaultValue{2.5} allowHalf / /HStack HStack Text muted w{80}ReadOnly/Text Rate readOnly defaultValue{2.5} allowHalf / /HStack HStack Text muted w{80}Plaintext/Text Rate plaintext defaultValue{2.5} allowHalf / /HStack /VStack ); ReactDOM.render(App /, document.getElementById(root));disabled完全不可交互点击与悬停均失效根元素tabIndex被设为-1整组以 0.5 透明度呈现源码在 Rate.tsx、样式在 styles/index.scss。readOnly不可交互但保持默认光标cursor: default常用于展示已确认的评分如平均分展示场景样式见 styles/index.scss。plaintext表单只读文本模式不渲染星级而是输出值/max文本如2.5/5未选择时输出未选择占位文案实现见 Rate.tsx。测试用例分别验证了 disabled 下点击与悬停均不改变星形状态。自定义字符Characterscharacter支持任意 ReactNode图标、Emoji、数字、中文等均可作为评分符号。配合renderCharacter甚至可以在选中/未选中时显示不同的图形import { Rate, VStack, Divider } from rsuite; import { FaHeart, FaRegStar, FaStar } from react-icons/fa; const App () { const [value, setValue] React.useState(2.5); return ( VStack spacing{10} Divider labelSvg icon labelPlacementstart / Rate allowHalf value{value} character{FaHeart /} colorred onChange{setValue} / Rate allowHalf value{value} onChange{setValue} coloryellow renderCharacter{(value, index) { if (value index 1) { return FaStar /; } return FaRegStar /; }} / Divider labelEmoji labelPlacementstart / Rate allowHalf value{value} character❤️ onChange{setValue} / Rate allowHalf value{value} character onChange{setValue} / Rate allowHalf value{value} character⭐️ onChange{setValue} / /VStack ); }; ReactDOM.render(App /, document.getElementById(root));character统一替换所有位置的符号默认是Star图标见 Rate.tsx。renderCharacter(value, index)按值/索引逐位渲染返回值同时被before与after两层复用因此未选中态灰色与选中态着色是同一个字符的两种状态示例中用FaStar/FaRegStar区分选中与否即利用了这一机制。半星与自定义字符可自由组合示例中allowHalf与character同时启用且 emoji 本身天然支持半星裁剪效果。分级自定义字符Customized rates当评分存在多个等级时可以用renderCharacter为每个等级定制不同符号与颜色——注意这需要自行实现映射逻辑组件只负责按位调用你的函数import { Rate, VStack, Divider } from rsuite; import { FaFrown, FaMeh, FaSmile } from react-icons/fa; const renderCharacter (value, index) { // unselected character if (value index 1) { return FaMeh /; } if (value 3) { return FaFrown color#99A9BF /; } if (value 4) { return FaMeh color#F4CA1D /; } return FaSmile color#ff9800 /; }; const App () ( VStack spacing{10} VStack Rate defaultValue{1} renderCharacter{renderCharacter} / Rate defaultValue{2} renderCharacter{renderCharacter} / Rate defaultValue{3} renderCharacter{renderCharacter} / Rate defaultValue{4} renderCharacter{renderCharacter} / Rate defaultValue{5} renderCharacter{renderCharacter} / /VStack Divider labelMax 10 labelPlacementstart / Rate max{10} defaultValue{2} / /VStack ); ReactDOM.render(App /, document.getElementById(root));上例实现差评→皱眉、中评→平淡、好评→微笑的阶梯映射。renderCharacter的第一参数是当前悬停/选中值hoverValue第二参数是字符索引通过value index 1判断当前字符是否已点亮见 Rate.tsx。同时示例展示了max{10}可扩展评分等级测试用例确认max{10}会渲染 10 个roleradio字符。小数评分Fractional ratingsRate 的值可以是任意小数用于展示平均分这类精确数据。配合readOnly即可做只读展示半星模式allowHalf之外的任意小数位会按比例裁剪字符的填充宽度import { Rate, VStack, HStack, Text } from rsuite; import { FaHeart } from react-icons/fa; const App () { return ( VStack HStack spacing{10} Rate value{4.32} readOnly coloryellow / Text4.32/Text /HStack HStack spacing{10} Rate value{3.7} readOnly coloryellow / Text3.7/Text /HStack HStack spacing{10} Rate value{4.76} vertical readOnly coloryellow / Text4.76/Text /HStack /VStack ); }; ReactDOM.render(App /, document.getElementById(root));实现原理值 → 星状态 → 填充百分比值转星状态transformValueToStarStatus把数值拆成每颗星的1满、0.5半仅allowHalf时、小数位如4.32的最后一颗星为0.32与0空四类状态见 utils.ts。填充宽度getFractionalValue提取小数部分并转成百分比字符串通过 CSS 变量--rs-rate-before-size控制before层宽度即4.32 分显示 4 颗满星 第 5 颗星填充 32%见 utils.ts 与 Rate.tsx。状态标注getStarStatus把0 / 0.5 / 1映射为empty / half / full其他小数映射为frac写入data-status属性供样式与测试使用utils.ts。types.ts中定义了StarStatus 0 | 0.5 | 1 | number见 types.ts。高级评分面板Advanced rating把 Rate 与Progress.Line、HStack/VStack、Text等布局组件组合即可实现电商平台常见的星级分布 平均分 引导评分完整面板可直接作为商品页评分区块的参考实现import { Rate, VStack, HStack, Text, Progress } from rsuite; const App () { const ratingData { average: 4.3, total: 2847, distribution: [ { stars: 5, percentage: 58, count: 1651 }, { stars: 4, percentage: 26, count: 740 }, { stars: 3, percentage: 9, count: 256 }, { stars: 2, percentage: 5, count: 142 }, { stars: 1, percentage: 2, count: 58 } ] }; return ( VStack spacing{20} HStack spacing{10} aligncenter VStack alignflex-start w{200} Text sizexl{ratingData.average} out of 5/Text Rate value{ratingData.average} readOnly coloryellow sizesm / Text muted mt{5} {ratingData.total} global ratings /Text /VStack VStack spacing{8} {ratingData.distribution.map(item ( HStack key{item.stars} spacing{10} aligncenter w{300} Text{item.stars} star/Text Progress.Line percent{item.percentage} strokeColor#FFA41C showInfo{false} style{{ flex: 1 }} / Text w{40}{item.percentage}%/Text /HStack ))} /VStack /HStack Divider labelRate this product labelPlacementstart / Rate defaultValue{0} coloryellow / /VStack ); }; ReactDOM.render(App /, document.getElementById(root));关键点平均分用Rate value{ratingData.average} readOnly coloryellow sizesm /做只读展示4.3 会呈现 4 星 1 颗 32% 填充星分布用Progress.Line渲染百分比条底部用可交互的Rate引导用户打分。无障碍AccessibilityRate 遵循 WAI-ARIA 教程中关于星级评分控件A Star Rating的规范设计教程参考W3C WAI 教程 - Custom Controls核心语义映射如下根元素ul声明roleradiogroup每颗星是roleradio的单选按钮每颗星提供aria-posinset位置序号与aria-setsize总数量即max当前选中星通过aria-checked标记见 Rate.tsx键盘支持方向键ArrowRight/ArrowLeft以 1allowHalf时为 0.5为步进调整值Enter确认选择键盘值会严格钳制在0 ~ max之间Rate.tsx。相关键盘行为均有测试用例覆盖见 Rate.spec.tsx 的 Keyboard navigation 区块。完整 Props 一览Rate属性表PropertyType (Default)DescriptionallowHalfboolean(false)是否支持半星选择characterReactNode自定义评分字符cleanableboolean(true)是否支持点击已选值来清除重置为 0defaultValuenumber(0)默认值非受控disabledboolean(false)禁用为 true 时不可交互maxnumber(5)最大分数字符数量renderCharacter(value: number) ReactNode自定义渲染字符函数readOnlyboolean是否只读为 true 时不可交互sizeSize | number | string设置组件尺寸colorColor | CSSProperties[color]设置组件颜色支持预设主题色与自定义颜色hex、rgb 等valuenumber当前值受控verticalboolean(false)半星选择时的填充方向onChange(value: number, event) void值变化时的回调onChangeActive(value: number, event) void悬停状态变化时的回调类型定义// 预设颜色[docs/pages/_common/types/color.md](https://link.gitcode.com/i/1634203b57c3d0f5e50e9c9542a575da) type Color red | orange | yellow | green | cyan | blue | violet; // 预设尺寸[docs/pages/_common/types/size.md](https://link.gitcode.com/i/401045327b49eb7fd0e399552b2b4b42) type Size xs | sm | md | lg | xl;几点补充说明受控/非受控不传value时内部用useControlled(valueProp, defaultValue)管理状态传value后即为完全受控外部更新value时星形状态同步刷新见 useRatingStates.ts 与测试 Should update characterMap when value is updated。可清除性cleanable默认开启点击当前已选中的字符会把值清零cleanable{false}后无法清除。测试用例 Should clean full/half value 与 Should cant clean value 覆盖了这两种行为Rate.tsx。回调签名onChange与onChangeActive的回调第二参数均为原生事件对象测试断言expect.any(Object)。半星模式下allowHalf为false时键盘步进为 1为true时步进为 0.5且不会超过max见 Rate.tsx 与对应键盘测试。实践要点小结展示平均分value{4.3} readOnly coloryellow小数位自动裁剪填充宽度无需手动处理。用户打分defaultValue{0} allowHalf onChange{handler}必要时cleanable让用户可反悔清零。个性符号character{FaHeart /}或character❤️即可全量替换符号需要分级反馈时用renderCharacter自建映射。实时文案反馈用onChangeActive联动状态文本鼠标离开后自动回落为已确认值。表单集成Rate 兼容FormControlBaseProps可作为 Form 控件使用plaintext模式输出值/max文本。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐rsuite Rate 评分组件完全指南从基础用法到源码级实现原理rsuite Rate 评分组件完全指南从基础用法到源码级实现原理 导读 Rate 是 rsuite 中用于表达用户对内容兴趣程度的评分组件中文文档直译为前端UI组件Naive UI 评分组件 Rate 完全指南从基础用法到源码级原理Naive UI 评分组件 Rate 完全指南从基础用法到源码级原理 Naive UI 的 Rate 评分组件用于让用户以星级图标表达评价等级是表单与内前端UI组件Vant Rate 评分组件完全指南从基础用法到源码级交互原理Vant Rate 评分组件完全指南从基础用法到源码级交互原理 Rate评分是 Vant 组件库中用于对事物进行评级的轻量级交互组件。在移动端电商、内前端UI组件上一篇ThinkPHP多语言网站开发终极指南5步实现国际化下一篇gh_mirrors/aw/awesome-obsidian项目文档结构优化建议提升资源可访问性创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考