React无法正常渲染Django返回的TinyMCE富文本内容如何解决

核心问题原因 #

• dangerouslySetInnerHTML 语法使用错误，该API要求必须传入结构为{ __html: 待渲染HTML字符串 }的对象，直接传入字符串无法被识别，所以页面无内容渲染。
• Django默认会对输出的HTML内容做转义处理，你拿到的product.description实际是转义后的字符实体（比如<会被转为<），就算语法正确也会直接显示标签而非解析为DOM元素。

具体解决步骤 #

第一步：修正React端渲染语法 #

正确的写法如下：

<div dangerouslySetInnerHTML={{ __html: product.description }} />

第二步：处理HTML转义问题，二选一即可 #

方案1：后端处理（更推荐，从根源解决问题）

Django接口返回富文本字段时，用mark_safe标记该字段不需要转义，示例（基于DRF序列化器）：

from django.utils.safestring import mark_safe
from rest_framework import serializers
from .models import Product

class ProductSerializer(serializers.ModelSerializer):
    # 单独处理富文本字段
    description = serializers.SerializerMethodField()
    
    def get_description(self, obj):
        return mark_safe(obj.description)
    
    class Meta:
        model = Product
        fields = "__all__"

方案2：前端处理（无需改后端的临时方案）

前端新增HTML实体解码函数，把转义后的内容还原为原生HTML后再渲染：

// 封装HTML解码函数
const decodeHtml = (escapedHtml) => {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = escapedHtml;
  return textarea.value;
}

// 渲染时调用
<div dangerouslySetInnerHTML={{ __html: decodeHtml(product.description) }} />

注意事项 #

由于直接插入富文本存在XSS攻击风险，建议提前做内容安全过滤：可以在TinyMCE编辑器配置阶段限制允许使用的标签、属性，也可以在后端存储富文本时过滤掉script、iframe等危险标签，避免恶意代码执行。

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