React中TinyMCE编辑器HTML标签无法正常渲染问题求助

在React项目中使用TinyMCE富文本编辑器编辑带HTML标签的内容，存入Firebase后，页面渲染时HTML标签（如<p>）直接以文本形式显示，未被解析成对应的HTML元素。

相关代码 #

TinyMCE编辑器代码 #

import { Editor } from '@tinymce/tinymce-react';

<Editor 
  id='tinyMce' 
  init={{
    height: 200,
    menubar: false,
    toolbar_sticky: true,
    plugins: [
      'a11ychecker','advlist','advcode','advtable','autolink','checklist','export', 
      'lists','link','image','charmap','preview','anchor','searchreplace','visualblocks',
      'powerpaste','fullscreen','formatpainter','insertdatetime','media','table','help','wordcount'
    ],
    toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
             'alignleft aligncenter alignright alignjustify | ' +
             'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help'
  }}
  value={title}
  onEditorChange={setTitle}
/>

原渲染代码 #

{values.Title}

渲染效果截图 #

解决方案 #

React出于安全考虑，默认会转义所有HTML内容，直接输出{values.Title}只会将其作为纯文本展示。要正确渲染HTML内容，需要使用dangerouslySetInnerHTML属性：

<div dangerouslySetInnerHTML={{ __html: values.Title }} />

注意：使用dangerouslySetInnerHTML存在XSS攻击风险，确保渲染的内容是可信的（比如经过过滤或来自可靠来源），避免直接渲染用户提交的未过滤内容。

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