ReactMarkdown 基本使用

解析带超链接的数据

const str = '[百度](https://www.baidu.com/)这是百度的地址'

效果图

ReactMarkdown

import ReactMarkdown from "react-markdown";
   <ReactMarkdown source={str} 
   escapeHtml={false}
    linkTarget="_blank" // 在新标签页打开
     />

html-react-parser 解析html

npm install html-react-parser --save

import parse from 'html-react-parser'
// 一个用于匹配并转换非标准链接的函数
// 这具体的格式类似于 Markdown 链接，形如 [link text](URL)
function converHtmlLinks(str) {
    const regex = /\[([^\]]+)\]\((https?:\/\/[^\s]+)\)/g;
    return str.replace(regex, '<a href="$2">$1</a>').replace(/\\n/g, '<br/>');
}
<div>
        {parse(converHtmlLinks(strHtml))}
      </div>

效果图