使用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组件中呈现原始超文本标记语言，您将需要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