这是使用markedwith的一种方法React：

1. 确保您已安装 marked
2. 包括marked在您的项目package.json文件中：

// package.json
{
  dependencies: {
    react: "^17.0.0",
    marked: "^4.0.0",
  },
}

3. marked在您的.jsx （或相关的）文件中导入：

import { marked } from "marked";

4. 使用危险的SetInnerHTML方法，如下例所示：

import React from "react";
import { marked } from "marked";

class MarkdownExample extends React.Component {
  getMarkdownText() {
    var rawMarkup = marked.parse("This is _Markdown_.");
    return { __html: rawMarkup };
  }
  render() {
    return <div dangerouslySetInnerHTML={this.getMarkdownText()} />;
  }
}

该dangerouslySetInnerHTML属性使您能够使用原始 (HTML) 标记。不过在使用这个属性时一定要小心！

替代（安全）

如果您不想使用dangerouslySetInnerHTML并安全地呈现 HTML。尝试标记react，它在内部用于marked将 html 元素呈现为react组件

npm i marked-react

import Markdown from "marked-react";

const MarkdownComponent = () => {
  return <Markdown>{rawmarkdown}</Markdown>;
};

另一种选择是react-markdown

使用标记包装器react-marked-markdown：

import { MarkdownPreview } from 'react-marked-markdown'

export default ({ post }) => (
  <div>
    <h1>{ post.title }</h1>
    <MarkdownPreview value={ post.content }/>
  </div>
)

如果您只想导入标记：

import marked from 'marked';

然后调用组件中的函数：

marked('# Markdown');

这是使用React Hooks标记的另一种使用方式：

1. 创建您的 MarkedConverter 组件

import { useState } from 'react'
import marked from 'marked'

export const MarkedConverter = () => {
  const [markedVal, setMarkedVal] = useState(
    '# Welcome to my React Markdown Previewer!'
  )
  return <div dangerouslySetInnerHTML={createMarkUp(markedVal)}></div>
}

2. 创建标记函数并从 MarkedConverter 组件传递值

export const createMarkUp = (val) => {
 return { __html: marked(val) }
}

3. 最后，您可以将 MarkedConverter 组件导入到您的任何组件中