企业官网建设流程全解析

• 前端
• UI组件

本篇文章围绕 RSuite 组件库中ProgressCircle（环形进度条）的showInfo属性展开，结合仓库中的组件官方文档与源码实现，系统讲解该属性如何控制环形中心百分比文字的显示与隐藏，并延伸介绍与之配套的renderInfo、status、percent等属性及底层渲染原理。读完本文，你将掌握在真实业务场景中灵活开关、定制环形进度条信息区的完整实战方案。

一、showInfo 是做什么的

ProgressCircle是 RSuite 提供的环形进度指示组件，用于展示某个操作的完成进度。默认情况下，组件会在圆环中心显示当前百分比文本（如30%）。showInfo属性就是控制这段中心文字是否渲染的开关：

• showInfo={true}（默认值）：渲染中心信息区，显示百分比文本或状态图标；
• showInfo={false}：完全隐藏中心信息区，只保留圆环本身，适合需要纯图形化展示的场景（如仪表盘背景装饰、只靠颜色传达进度的场景）。

从源码看，该属性的默认值为true，并通过条件渲染控制信息区挂载与否：

// src/ProgressCircle/ProgressCircle.tsx const { ... showInfo = true, ... } = propsWithDefaults; return ( <Box role="progressbar" ...> {showInfo && ( <ProgressInfo percent={totalPercent} renderInfo={renderInfo} status={status} classPrefix={classPrefix} /> )} <svg className={prefix('svg')} viewBox="0 0 100 100" width={width}> ... </svg> </Box> );

可以看到，showInfo为false时，ProgressInfo组件根本不会被挂载，因此中心区域也不会占用视觉空间。

二、官方示例：开与关的直观对比

官方 show-info 示例用最简单的方式演示了两个并排圆环的差异：

import { ProgressCircle, HStack } from 'rsuite'; const App = () => ( <HStack spacing={20}> <ProgressCircle percent={30} showInfo={true} w={100} /> <ProgressCircle percent={30} showInfo={false} w={100} /> </HStack> );

两个圆环的percent均为 30、直径w均为 100，唯一的区别是showInfo取值不同：左侧圆环中心显示30%，右侧圆环中心为空白，仅保留外圈弧线。这是验证该属性行为最直接的用例，可直接在任意 React 项目中运行。

三、配套属性总览：官方 Props 表

要让showInfo真正服务于业务，通常需要与其他属性配合。以下是官方文档中<ProgressCircle>的完整属性表（默认值与取值说明已保留）：

其中与showInfo直接相关的是：

• percent：信息区显示的百分比来源。传入showInfo={true}且未提供renderInfo时，中心显示${percent}%；
• renderInfo：当需要比“纯百分比”更丰富的内容时，用它完全接管信息区渲染；
• status：设置status="success"或"fail"时，默认信息区会替换为对应的状态图标（见下文源码说明），这也解释了为什么设置了状态后中心往往不再显示百分比数字。

四、源码级解析：showInfo 背后发生了什么

1. 信息区由共享组件 ProgressInfo 渲染

showInfo控制的其实是ProgressInfo组件的挂载。该组件同时被ProgressLine与ProgressCircle复用，位于 src/Progress/ProgressInfo.tsx：

const ProgressInfo = (props: ProgressInfoProps) => { const { percent, renderInfo, status, classPrefix } = props; const { prefix } = useStyles(classPrefix); const showIcon = status && status !== 'active'; return ( <div className={prefix('info')}> {renderInfo ? renderInfo(percent, status) : showIcon ? PROGRESS_STATUS_ICON[status] : `${percent}%`} </div> ); };

其渲染优先级可以总结为：

1. 若提供了renderInfo，直接调用renderInfo(percent, status)，完全自定义；
2. 否则若status为success或fail（active不显示图标），显示 statusIcons 中对应的状态图标；
3. 兜底显示${percent}%文本。

由此可以推断：只要showInfo为true，无论是否设置status或renderInfo，信息区都会渲染，只是内容不同；而showInfo={false}会让以上所有逻辑整体失效。

2. percent 的两种来源

ProgressCircle渲染时传入的percent实际是totalPercent。从 src/ProgressCircle/ProgressCircle.tsx 可以看到：

const totalPercent = useMemo(() => { if (!sections) return percent; return Math.min( 100, sections.reduce((acc, section) => acc + section.percent, 0) ); }, [percent, sections]);

• 未使用sections时，totalPercent就是percent；
• 使用了sections（多分段）时，中心信息显示的百分比是所有分段percent之和，上限 100。

这也意味着，showInfo开启时中心展示的数字会随sections配置动态变化。

3. 可访问性并未因隐藏而缺失

即使showInfo={false}隐藏了可见文本，组件外层仍保留了完整的无障碍语义：

<Box role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={totalPercent} ... />

因此屏幕阅读器依然能够读取当前进度值，隐藏视觉文本不会损害辅助技术支持，这在数据可视化场景中是很实用的细节。

五、从 showInfo 出发：信息区的三种进阶用法

官方文档围绕信息区还提供了两个直接相关的示例片段，可用于在showInfo开启时进一步定制内容。

1. 用 renderInfo 完全接管内容

render-info 示例展示了三种自定义方式：固定文案、百分比 + 文案组合、以及按status切换图标与颜色：

import { ProgressCircle, HStack, VStack, Text } from 'rsuite'; import { FaCheckCircle } from 'react-icons/fa'; const App = () => ( <HStack spacing={20}> {/* 固定文案 */} <ProgressCircle percent={30} w={100} renderInfo={percent => `Usage`} /> {/* 文案 + 百分比 */} <ProgressCircle percent={60} w={100} renderInfo={percent => ( <VStack align="center"> <Text>Usage</Text> <Text>{percent}%</Text> </VStack> )} /> {/* 按状态切换图标 */} <ProgressCircle percent={100} w={100} status="success" renderInfo={(percent, status) => ( <span style={{ color: status === 'success' ? '#4CAF50' : '#000' }} > {status === 'success' ? <FaCheckCircle size="30" color="#4CAF50" /> : `${percent}%`} </span> )} /> </HStack> );

注意renderInfo回调签名是(percent: number, status?: 'success' | 'fail' | 'active') => ReactNode，与ProgressInfo内部调用完全一致。

2. 配合 status 显示状态语义

status 示例中，showInfo保持默认开启，通过status表达不同语义：

<ProgressCircle percent={30} status="active" w={100} /> <ProgressCircle percent={30} status="success" w={100} /> <ProgressCircle percent={30} status="fail" w={100} />

依据 ProgressInfo.tsx 的逻辑：active状态只影响弧线动画样式、中心仍显示百分比；success/fail状态则会将中心替换为对应的状态图标（PROGRESS_STATUS_ICON）。同时组件根节点会追加rs-progress-circle-success/rs-progress-circle-fail等状态类名（见 ProgressCircle.tsx 中withPrefix({ [${status || ''}]: !!status })），便于做样式定制。

3. 需要纯图形时：直接关掉

当页面视觉元素过多、或环形图只承担“装饰 + 颜色语义”职责时，采用本文核心示例的写法：

<ProgressCircle percent={30} showInfo={false} w={100} />

此时中心空白，配合 stroke-color 示例（strokeColor自定义弧线颜色）、stroke-width 示例（strokeWidth调整粗细）与 gap 示例（gapDegree/gapPosition控制缺口），即可组合出风格统一的纯图形进度指示器。

六、测试用例佐证：行为可验证

仓库中的单元测试明确覆盖了showInfo的两个分支：

it('Should render info', () => { render(<ProgressCircle />); expect(screen.getByRole('progressbar').querySelector('.rs-progress-circle-info')).to.exist; }); it('Should not render info', () => { render(<ProgressCircle showInfo={false} />); expect(screen.getByRole('progressbar').querySelector('.rs-progress-circle-info')).to.not.exist; });

即：默认渲染.rs-progress-circle-info信息容器；showInfo={false}时该容器不存在。同文件还验证了status类名、strokeLinecap属性透传、gapPosition起始位置等行为，可作为回归验证的参照。

七、实践建议小结

• 何时开启：需要向用户直接传达进度数值（如上传统计、配额使用率）时保持默认showInfo={true}；
• 何时关闭：圆环仅作为状态色块、或信息已由外部文本呈现时，使用showInfo={false}保持界面简洁；
• 进阶定制：开启状态下优先考虑renderInfo做图文混排；涉及成败语义时配合status使用，组件会自动切换图标与状态类名；
• 百分比边界：percent与sections分段求和都会传给信息区，多分段场景下中心数字为各段之和（封顶 100）。

如需进一步阅读，可参考ProgressCircle 官方文档中的完整属性说明，以及各 fragments 示例（basic.md、sections.md、stroke-linecap.md 等），它们共同构成了该组件的完整用法图谱。

• 前端
• UI组件