type
status
date
slug
summary
tags
category
icon
password
背景
在日常开发中，我们经常需要在界面中展示 JSON 数据，比如接口返回值调试、日志查看、配置信息展示等。虽然可以直接使用文本框或
pre 标签来展示，但这样不仅缺乏格式化，还缺少高亮和良好的可读性，体验较差。为了提升用户体验和开发效率，我们决定封装一个简单易用的 JSON 高亮展示组件，方便在各个项目中复用。
选型思考
为了实现「高亮」效果，我们调研了几种方案：
- 纯前端手动解析 JSON 渲染成 HTML（成本高，不必要）
- 使用第三方高亮库，比如：
highlight.jsreact-syntax-highlighter（React 封装友好）
综合考虑易用性、社区活跃度、定制性，我们最终选择了
react-syntax-highlighter。封装目标
在正式动手之前，我们明确了封装的几个核心目标：
- 支持灵活输入：可以接受 JSON 字符串或对象。
- 防止异常崩溃：即使输入数据格式不规范，也能优雅处理。
- 可定制性：支持最大高度、自定义样式、控制是否显示行号。
- 默认体验友好：即使不传任何配置，也能有合理的默认展示。
- 可扩展性：未来可以快速适配其他语言高亮（虽然目前专注 JSON）。
实现思路
1. 统一处理输入数据
首先考虑到用户可能传入对象或字符串，所以需要一个统一处理的方法。
- 如果是对象：使用
JSON.stringify(obj, null, 2)格式化成带缩进的字符串。
- 如果是字符串：调用
formatJsonString工具函数，确保其被正确格式化，防止直接渲染出一坨难以阅读的字符串。
- 如果为空或者解析失败：显示一个合理的占位文本，例如
{ // 暂无数据 }。
这样可以保证组件无论拿到什么输入，都能稳定展示。
2. 基于 SyntaxHighlighter 渲染
在渲染层面，选择了
SyntaxHighlighter：- 设置
language="json"，使用内置的 JSON 高亮规则。
- 使用
docco主题风格（浅色、简洁，比较适合后台页面）。
- 开启或关闭行号显示（
showLineNumbers可控）。
- 支持自动换行长行文本（
wrapLongLines）。
- 控制最大高度，并在超出时自动滚动。
代码示例：
3. 合理默认配置
为了降低组件使用门槛，我们为大部分配置项提供了合理的默认值，比如：
- 最大高度 800px
- 显示行号
- 不自动换行
- 占位文本
这让组件即插即用，减少了开发者的心智负担。
技术细节 & 注意点
- 错误处理：无论
json是什么格式，组件内部都会包一层 try-catch，确保不会因为格式问题导致页面报错。
- 样式合并：使用
customStyleprop，允许用户在默认滚动样式的基础上追加自己的样式，而不是完全覆盖。
- 性能考虑：
SyntaxHighlighter渲染性能较好，但在极大规模 JSON 时仍需注意（如上 MB 级别数据）。
可能的扩展方向
- 支持不同主题风格切换（深色、暗黑模式）
- 动态语言高亮（不仅是 JSON，也可以是 YAML、JavaScript 等）
- JSON 数据折叠/展开功能（比如大对象自动折叠）
- 搜索高亮关键词
- 代码拷贝功能
总结
这个
JsonHighlighter 组件的封装，实际上是一次典型的「围绕单一场景的小工具组件设计」实践：- 从真实需求出发
- 简单，健壮，默认友好
- 保留扩展性
- 统一处理输入和异常
- 不引入不必要的复杂性
同时也体现了一个开发者在面对小功能时应该保持的克制 —— 够用即可，不盲目 over-engineering。