react-markdown不支持HTML语法与新窗口跳转？原因及方案咨询

数据老陈

2026-8-16

问题原因

Markdown链接语法限制：标准Markdown的链接格式[文本](URL)中，括号内仅支持填写纯URL，不允许附加HTML属性（比如target="_blank"），你第一种写法里的属性会被当成URL的一部分解析，自然无法生效。
HTML默认禁用：react-markdown出于安全考量（防范XSS攻击），默认不会解析输入中的HTML标签，直接写<a>标签会被转义成纯文本显示。

解决方法

方法一：自定义链接组件（推荐，安全可控）

react-markdown支持通过components属性自定义元素渲染逻辑，直接给链接添加目标属性，同时建议加上rel="noopener noreferrer"避免安全风险：

import ReactMarkdown from 'react-markdown';

const MarkdownViewer = ({ content }) => {
  const components = {
    a: ({ href, children }) => (
      <a href={href} target="_blank" rel="noopener noreferrer">
        {children}
      </a>
    )
  };

  return <ReactMarkdown components={components}>{content}</ReactMarkdown>;
};

方法二：启用HTML解析（需注意安全）

如果必须使用原生HTML标签，可以借助rehype-raw插件开启HTML解析能力：

先安装依赖：

npm install rehype-raw

配置react-markdown：

import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';

const MarkdownViewer = ({ content }) => {
  return <ReactMarkdown rehypePlugins={[rehypeRaw]}>{content}</ReactMarkdown>;
};