如何在JSON字符串中嵌入HTML并在Next.js中正常渲染（避免使用dangerouslySetInnerHTML）

嘿，我完全懂你不想碰dangerouslySetInnerHTML的心态——毕竟这个名字就自带“谨慎使用”的警告感😂。咱们来聊聊几个靠谱的替代方案，不用这个API也能搞定需求：

方案一：把JSON改成结构化数据（最推荐） #

与其在JSON里塞HTML字符串，不如把内容拆成更清晰的结构化字段，这样在组件里用JSX拼接就行，完全安全可控。

比如把你的JSON改成这样：

"login": [
  {
    "title": "Hello!",
    "blurb": {
      "preLinkText": "This is a secret direct link to enable login without a username and password. If you're having trouble accessing my portfolio via this link, please ",
      "linkText": "contact me.",
      "linkHref": "mailto:email@email.com"
    }
  }
]

然后在Next.js的组件里这么写：

<p className={`${styles.body} fadeIn`}>
  {cms.blurb.preLinkText}
  <a href={cms.blurb.linkHref} className={`${styles.link}`}>
    {cms.blurb.linkText}
  </a>
</p>

这个方案的好处太多了：完全绕开了HTML字符串解析的问题，样式类可以直接在组件里控制（不用在JSON里写className），而且完全符合React/Next.js的组件化思路，还没任何安全风险。

方案二：用Markdown替代HTML，配合解析库渲染 #

如果你需要更灵活的文本格式（比如不止一个链接、还有加粗/斜体等），可以把JSON里的内容改成Markdown格式，然后用专门的库解析成JSX。

先把你的JSON改成Markdown格式：

"login": [
  {
    "title": "Hello!",
    "blurb": "This is a secret direct link to enable login without a username and password. If you're having trouble accessing my portfolio via this link, please [contact me.](mailto:email@email.com)"
  }
]

然后咱们用react-markdown这个库来解析，先安装依赖：

npm install react-markdown

接着在组件里这么用：

import ReactMarkdown from 'react-markdown';

// 其他组件代码...

<p className={`${styles.body} fadeIn`}>
  <ReactMarkdown
    components={{
      // 自定义a标签，加上你的样式类
      a: ({ ...props }) => <a {...props} className={`${styles.link}`} />
    }}
  >
    {cms.blurb}
  </ReactMarkdown>
</p>

这个方案的优势是灵活，支持各种Markdown格式，而且react-markdown会自动过滤掉危险的HTML代码，比dangerouslySetInnerHTML安全多了，相当于在安全的前提下实现了灵活的文本渲染。

最后唠两句 #

• 如果你能控制JSON的结构，优先选方案一，最干净也最符合React的设计理念
• 方案二更适合需要复杂文本格式的场景，平衡了灵活性和安全性
• 确实要尽量避免dangerouslySetInnerHTML，除非你100%信任数据源的内容，毕竟它会跳过React的XSS防护，有潜在的安全风险

备注：内容来源于stack exchange，提问作者Shane Harley