ReactMarkdown渲染有序列表不显示数字问题求助

可能的原因及解决方案 #

1. 验证API返回的Markdown格式是否规范 #

有序列表必须遵循标准Markdown语法：每行开头需为数字. （数字后必须带空格），示例如下：

1. 第一条列表内容
2. 第二条列表内容
3. 第三条列表内容

如果API返回的只是换行的纯文本，未添加数字. 前缀，ReactMarkdown无法识别为有序列表，需确认接口返回格式是否正确。

2. 修复CSS样式覆盖问题 #

全局样式或Tailwind可能重置了有序列表的默认样式，导致数字不显示。可以通过自定义组件样式强制恢复列表数字：

<ReactMarkdown 
  remarkPlugins={[remarkGfm]}
  components={{
    ol: ({ children }) => <ol className="list-decimal pl-5">{children}</ol>
  }}
>
  {message.content}
</ReactMarkdown>

通过components属性自定义<ol>标签，添加list-decimal（启用十进制数字列表）和pl-5（增加左侧内边距，避免数字被截断）。

3. 确认依赖版本兼容性 #

确保react-markdown与remark-gfm版本匹配：

• react-markdown v8.x 需搭配 remark-gfm v3.x
• 执行以下命令更新依赖：

  npm install react-markdown@latest remark-gfm@latest
  

4. 排查渲染逻辑干扰 #

在渲染前打印message.content，确认内容格式无误：

console.log('AI消息内容:', message.content);

若格式正确仍无法渲染，可简化组件代码，排除其他样式或逻辑的干扰。

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