react-markdown渲染HTML有序列表仅输出原始字符串如何解决？

问题原因 #

react-markdown 默认关闭了HTML内容解析能力以避免XSS安全风险，你传入的<ol>这类HTML标签会被识别为普通文本输出。你用到的remarkGfm插件仅用于支持GFM扩展的Markdown语法，不承担HTML解析能力。 #

解决方案 #

方案1：改用标准Markdown语法写有序列表（更安全，无需额外插件） #

直接把内容换成标准Markdown格式的有序列表即可正常渲染：

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'

const MyComponent = () => {
    const markdown = `1. Item1
2. Item2`;
    return (
       <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />
    );
}

方案2：确实需要解析HTML的场景，新增rehype-raw插件 #

如果你的内容来源可信，确认无XSS风险，可以安装rehype-raw插件开启HTML解析能力：

1. 安装依赖

npm install rehype-raw

2. 调整组件配置

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'

const MyComponent = () => {
    const markdown = `<ol><li>Item1</li><li>Item2</li></ol>`;
    return (
       <ReactMarkdown 
         children={markdown} 
         remarkPlugins={[remarkGfm]} 
         rehypePlugins={[rehypeRaw]} 
       />
    );
}

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