Next.js中如何解析JSON字符串并渲染带HTML标签的内容

你遇到的核心问题是Next.js/React默认会自动转义HTML内容，直接将带HTML标签的字符串放入JSX中，会被当作纯文本渲染，而非解析成HTML元素。你的parseTitle函数实际上没有起到任何作用——它只是匹配并替换了转义后的<b>标签（<b>），但原JSON里的title本身包含的是真实的<b>标签，这个函数完全多余。

正确解决方案 #

使用Next.js/React提供的dangerouslySetInnerHTML属性，直接渲染原始HTML内容：

<h1 dangerouslySetInnerHTML={{ __html: votingInfo.title }} />

注意事项 #

• dangerouslySetInnerHTML之所以带"dangerously"前缀，是因为如果渲染的内容来自不可信的用户输入，可能会引发XSS攻击。如果你的title内容是自己维护的JSON文件，不存在安全风险，可以放心使用。
• 如果需要处理不可信内容，建议先通过dompurify等库对HTML进行净化，再传入__html中。

内容的提问来源于stack exchange，提问作者Oleksii Binetskyi