本文详解如何在 React 中正确渲染 OpenTDB 等 trivia API 返回的 HTML 编码字符（如 "、'、&），避免显示异常，并强调 dangerouslySetInnerHTML 的正确用法与关键安全注意事项。
本文详解如何在 react 中正确渲染 opentdb 等 trivia api 返回的 html 编码字符（如 `"`、`'`、`&`），避免显示异常，并强调 `dangerouslysetinnerhtml` 的正确用法与关键安全注意事项。
在调用类似 OpenTDB 这类公开 trivia API 时，你常会遇到问题字段（如 d.question）包含 HTML 实体编码的内容，例如：
"Which of these is "not" a programming language?"
直接在 JSX 中使用 {d.question} 会导致原样输出 "，而非引号 "——这是因为 React 默认对字符串进行 HTML 转义以防止 XSS 攻击，不会自动解码 HTML 实体。
✅ 正确解码方式：使用 dangerouslySetInnerHTML
React 提供了 dangerouslySetInnerHTML 属性，用于显式插入已知安全的 HTML 字符串。要正确渲染解码后的内容，需将原始字符串传入 __html 字段：
const Question = ({ q }) => {
return <div dangerouslySetInnerHTML={{ __html: q }} />;
};该写法会由浏览器自动解析并渲染 " → ", ' → ', & → &, ' → ' 等标准实体。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意：“dangerously” 并非虚设——仅当数据来源完全可信（如受控的 trivia API）且不含用户输入内容时才可使用。若 API 允许用户提交题目，此方法存在 XSS 风险，应改用专用解码库（见下文补充）。
? 更健壮的替代方案（推荐用于生产环境）
为兼顾安全性与兼容性，建议引入轻量解码工具，例如 he（专为 HTML 实体设计，支持所有标准及命名/数字实体）：
npm install he
import he from 'he';
const Question = ({ q }) => {
const decoded = he.decode(q); // 安全解码，不执行脚本
return <div>{decoded}</div>;
};he.decode() 会严格解码实体，但不解析或执行任何 HTML 标签，因此即使字符串含 <script> 也会被当作纯文本处理，大幅提升安全性。</script>
? 使用要点总结
- ✅ 适用场景：API 数据源可信（如 OpenTDB）、内容为纯题目文本、无富文本或用户可控内容；
- ❌ 禁止场景：数据含用户生成内容、未过滤的 HTML 片段、或可能包含 <script>/onerror 等危险属性； </script>
- ?️ 生产建议：优先使用 he.decode() 或 DOMPurify.sanitize() 预处理后再渲染；
- ? 其他常见实体示例：
- < →
- > → >
- © → ©
- “ → “（左双引号）
通过合理选择解码策略，你既能准确呈现 trivia 题目中的标点与符号，又能守住前端安全底线——这正是专业 React 开发的关键平衡点。
