使用 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 docs（附录 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} />;
};

我也准备了simple CodePen

使用 react-markdown 的有序列表

Ordered list using react-markdown

markdown

reactjs

react-markdown