reactjs - 使用 react-markdown 的有序列表

Question

我正在尝试使用以下方式呈现有序列表react-markdown：

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

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

输出是字符串<ol><li>Item1</li><li>Item2</li></ol>。我错过了什么？

Answer 1

如react-markdown 文档（附录 A）中所述，为了在ReactMarkdown组件中呈现原始 HTML，您将需要该rehypeRaw插件。

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

const markdown = `<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>`;

const RootElement = () => {
  return <ReactMarkdown rehypePlugins={[rehypeRaw]} children={markdown} />;
};

我也准备了一个简单的CodePen