React中使用Marked实现文本转Markdown失败求助

嘿，我仔细看了你的代码，很快就找到了问题所在——Marked库的调用方式不对！

现在Marked的最新版本（v4及以上）已经废弃了直接调用marked(text)的解析方式，必须使用marked.parse()方法来处理文本。这就是为什么你的文本无法被转换，但控制台又没有报错的原因：旧的调用方式在新版本里不会抛出错误，但也不会返回正确的解析结果。

修改步骤 #

只需要把updateMarkdown函数里的marked(textTransform)替换成marked.parse(textTransform)即可：

function updateMarkdown() {
  const textTransform = DOMPurify.sanitize(text);
  const __html = marked.parse(textTransform); // 这里改用parse方法
  return { __html };
}

额外检查点 #

1. 确认Marked版本：可以打开package.json查看marked的版本号，或者在终端运行npm list marked。如果是v3及以下的旧版本，直接调用marked()是有效的，但还是建议升级到新版本并使用标准的parse方法。
2. 验证解析结果：可以在updateMarkdown里加个日志，确认是否生成了正确的HTML内容：

function updateMarkdown() {
  const textTransform = DOMPurify.sanitize(text);
  const __html = marked.parse(textTransform);
  console.log('解析后的HTML:', __html); // 查看是否生成了预期的HTML
  return { __html };
}

你的组件其他部分逻辑都是没问题的：useState的使用正确，输入框的onChange事件也能正常更新状态，改用类组件问题依旧也验证了不是Hooks的锅——就是Marked的调用方式需要调整。修改后再试试，应该就能正常预览Markdown了！

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