Markdown预览器值无法解析，添加渲染函数后内容消失求助

问题分析 #

你的预览器内容消失主要有两个核心问题：

1. React JSX中错误使用了class属性，React要求用className替代原生HTML的class，否则类名不会被正确识别（虽不是内容消失的直接原因，但属于必须修正的规范问题）。
2. marked库的sanitize选项在v4及以上版本已被移除，当前调用方式会导致marked无法正确生成HTML，最终dangerouslySetInnerHTML没有可渲染的内容。

具体修复步骤 #

1. 修正JSX中的类名属性 #

将所有class替换为className：

<div>
    <div className="title-input">VIEWER</div>
    <div>
        <div className="content" id="preview" dangerouslySetInnerHTML={this.getRawMarkup()} />
    </div>
</div>

2. 修复marked的HTML生成逻辑 #

如果使用的是marked v4+版本，需改用DOM净化库（比如DOMPurify）处理内容安全：

// 提前安装DOMPurify：npm install dompurify
import DOMPurify from 'dompurify';

getRawMarkup(){
    const rawHtml = marked.parse(this.state.value);
    return {__html: DOMPurify.sanitize(rawHtml)};
}

若不想额外引入依赖，可降级marked到v3.x版本（该版本仍支持sanitize选项）：

npm install marked@3

3. 确保state有初始值 #

在组件构造函数中给value设置默认Markdown内容，避免初始渲染为空：

constructor(props) {
    super(props);
    this.state = {
        value: '# 欢迎使用Markdown预览器\n\n这是一段示例内容'
    };
}

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