使用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