如何在Semantic UI React中让内容被<code>标签正确包裹？
2026-5-19
解决React+Semantic UI展示API响应对象的
包裹问题 嘿，我来帮你搞定这个问题！你现在用React+Semantic UI想展示API返回的响应对象，核心要解决两个点：一是把对象转成可读的格式化字符串，二是用Semantic的方式让内容被正确包裹并带上统一样式。
下面给你两种实用的实现方式：
方式一：用Semantic UI React的组件（推荐）
Semantic UI React专门提供了<Code>组件，设置block属性就能渲染块级代码区域，自动帮你处理标签的包裹，还自带Semantic的统一样式（比如代码字体、背景色、内边距）。
import React from 'react';
import { Code, Segment, Header } from 'semantic-ui-react';
function ApiResponseViewer({ apiResponse }) {
// 把API响应对象转为带缩进的JSON字符串，保证可读性
const formattedResponse = JSON.stringify(apiResponse, null, 2);
return (
<Segment> {/* 用Segment组件做容器，提升整体美观性 */}
<Header size="medium">API响应内容</Header>
{/* block属性让Code组件渲染为块级元素，自动包裹<code>标签 */}
<Code block>
{formattedResponse}
</Code>
</Segment>
);
}
export default ApiResponseViewer;
方式二：原生配合Semantic样式 #
如果你更习惯用原生HTML标签，也可以直接用<pre>和<code>，然后给容器加上Semantic的样式类，让它和你的项目风格统一。
import React from 'react';
function ApiResponseViewer({ apiResponse }) {
const formattedResponse = JSON.stringify(apiResponse, null, 2);
return (
<div className="ui segment">
<h3 className="ui header">API响应内容</h3>
<pre className="ui code"> {/* 加Semantic的code类，统一代码块样式 */}
<code>{formattedResponse}</code>
</pre>
</div>
);
}
export default ApiResponseViewer;
注意事项
- 必须把对象转为字符串：React不能直接渲染JavaScript对象，所以一定要用
JSON.stringify()把响应对象转成格式化的字符串，第二个参数null和第三个参数2是为了生成带2空格缩进的JSON，方便阅读。 - 处理循环引用：如果API返回的对象有循环引用（比如对象里嵌套了自身），
JSON.stringify()会报错，你可以用一个自定义的replacer函数来处理：const getCircularReplacer = () => {
const seen = new WeakSet();
return (key, value) => {
if (typeof value === "object" && value !== null) {
if (seen.has(value)) return "[Circular Reference]";
seen.add(value);
}
return value;
};
};
// 使用时替换成：
const formattedResponse = JSON.stringify(apiResponse, getCircularReplacer(), 2);
内容的提问来源于stack exchange，提问作者Kwhitejr
相关产品推荐
相关产品推荐
