如何将HTML字符串存入MongoDB并在React组件中渲染为真实HTML内容？

完全可以实现该需求，以下是具体操作步骤和常见问题说明：

1. 存入MongoDB的处理 #

无需对HTML字符串做特殊转换，直接将其作为普通String类型字段存入MongoDB即可，MongoDB对普通字符串的长度上限为16MB，完全满足绝大多数HTML内容的存储需求。
后端操作示例（以Mongoose为例）：

// 定义Schema
const PageSchema = new mongoose.Schema({
  pageHtml: String // 直接定义为字符串类型存储HTML内容
})
const PageModel = mongoose.model('Page', PageSchema)

// 插入HTML内容
await PageModel.create({
  pageHtml: '<div class="container"><h2>测试标题</h2><p>测试段落内容</p></div>'
})

2. React端渲染HTML的方法 #

你之前使用DOMParser未生效是因为DOMParser会把字符串解析为原生DOM节点，而React无法直接渲染原生DOM对象，React官方提供了专门的API处理该场景：dangerouslySetInnerHTML。

注意：如果存储的HTML内容来自普通用户提交，一定要先做XSS过滤再存入数据库，避免恶意脚本注入风险。

React组件渲染示例：

import { useState, useEffect } from 'react'
// 若需要XSS过滤可以引入xss库，执行npm install xss安装
// import xss from 'xss'

function HtmlRender() {
  const [htmlContent, setHtmlContent] = useState('')

  useEffect(() => {
    // 从后端接口拉取存在MongoDB的HTML字符串
    fetch('/api/get-page-html')
      .then(res => res.json())
      .then(data => setHtmlContent(data.pageHtml))
  }, [])

  return (
    <div className="html-wrapper">
      {/* 核心渲染逻辑，需要传入格式为{__html: 字符串}的对象 */}
      {/* 如果要做XSS过滤可以写成<div dangerouslySetInnerHTML={{__html: xss(htmlContent)}} /> */}
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  )
}

export default HtmlRender

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