React中如何正确展示react-draft-wysiwyg编辑器的纯HTML输出？

嘿，我之前也踩过这个坑！你现在遇到的是React默认会自动转义HTML内容的问题——那些<、>转义字符被直接渲染成文本，而不是解析成对应的HTML标签，所以页面上才会显示一堆标签代码。

下面给你两种靠谱的解决办法：

方法一：直接处理已转义的HTML字符串 #

如果你的body已经是转义后的HTML字符串，那可以先把它解码成真实的HTML，再用React的dangerouslySetInnerHTML属性来渲染：

function ShowHtml(props) {
  let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
  // 先把转义的HTML字符还原成真实标签
  const decodedHtml = decodeURIComponent(body.replace(/</g, '%3C').replace(/>/g, '%3E'));
  return (
    <div dangerouslySetInnerHTML={{ __html: decodedHtml }} />
  )
}

方法二：从编辑器状态直接转换为HTML（更规范） #

其实react-draft-wysiwyg基于draft-js，编辑器的状态是EditorState格式，推荐用官方工具链来转换，避免手动解码的麻烦：

1. 先安装转换工具：

npm install draftjs-to-html

2. 在组件里转换并渲染：

import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';

// 假设editorState是你的编辑器实例状态
const htmlContent = draftToHtml(convertToRaw(editorState.getCurrentContent()));

function ShowHtml({ htmlContent }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
  )
}

重要提醒：注意XSS安全 #

dangerouslySetInnerHTML之所以带“dangerously”，是因为如果HTML内容来自用户输入，可能存在XSS攻击风险。建议用dompurify做内容过滤：

1. 安装依赖：

npm install dompurify

2. 过滤后再渲染：

import DOMPurify from 'dompurify';

function ShowHtml(props) {
  let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
  const decodedHtml = decodeURIComponent(body.replace(/</g, '%3C').replace(/>/g, '%3E'));
  // 过滤掉恶意脚本
  const sanitizedHtml = DOMPurify.sanitize(decodedHtml);
  return (
    <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
  )
}

这样处理后，页面就能正常显示格式化后的富文本内容啦！

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