React Markdown组件设置target="_blank"后链接仍无法在新标签页打开的原因排查

我实现了一个MarkdownRenderer组件，用来渲染Markdown内容，并且自定义了链接组件来添加target="_blank"和rel="noreferrer"属性：

// @flow
import ReactMarkdown from "react-markdown";
import type { Node } from "react";
function LinkRenderer(props: any) {
  return (
    <a href={props.href} target="_blank" rel="noreferrer">
      {props.children}
    </a>
  );
}
type Props = {
  children: Node,
};
const MarkdownRenderer = ({ children }: Props) => {
  return (
    <ReactMarkdown components={{ link: LinkRenderer }}>
      {children}
    </ReactMarkdown>
  );
}

我在其他组件里这样使用它：<MarkdownRenderer>{value}</MarkdownRenderer>，但设置了target="_blank"之后，生成的链接还是没办法在新标签页打开。有没有大佬能帮我找找可能的原因？

让我来帮你排查几个常见的问题：

1. react-markdown版本不匹配，自定义组件的key用错了 #

这是最常见的原因！如果你用的是react-markdown v6及以上版本，自定义链接组件的key应该是a，而不是link。v6版本重构了组件配置逻辑，所有HTML元素对应的key都是它们的标签名。

修改你的MarkdownRenderer组件：

const MarkdownRenderer = ({ children }: Props) => {
  return (
    <ReactMarkdown components={{ a: LinkRenderer }}> {/* 把link改成a */}
      {children}
    </ReactMarkdown>
  );
}

如果你还在使用v5及以下版本，那link是正确的key，但建议你检查一下版本是否有更新，或者确认props传递是否正常。

2. 传入的Markdown内容里用了HTML的<a>标签，而非Markdown链接语法 #

react-markdown默认不会解析HTML标签里的<a>，你的自定义LinkRenderer只对Markdown语法的链接（比如[点击跳转](https://example.com)）生效。如果你的value里是直接写的<a href="xxx">xxx</a>，那这个链接不会被你的自定义组件处理。

解决方法：

• 尽量使用标准的Markdown链接语法；
• 如果必须使用HTML，需要安装rehype-raw插件并配置：

  import rehypeRaw from 'rehype-raw';
  
  const MarkdownRenderer = ({ children }: Props) => {
    return (
      <ReactMarkdown 
        components={{ a: LinkRenderer }}
        rehypePlugins={[rehypeRaw]} // 加上这个插件
      >
        {children}
      </ReactMarkdown>
    );
  }
  

3. 存在其他代码阻止了链接的默认行为 #

检查一下你的页面中有没有全局的点击事件监听，或者父组件里有没有e.preventDefault()的逻辑，这些可能会拦截链接的新标签页打开行为。另外也可以检查一下链接元素的CSS，有没有设置pointer-events: none，这会让链接无法被点击。

4. 确认href属性的有效性 #

虽然这不会影响新标签页打开，但如果href是相对路径或者无效的URL，浏览器可能不会触发新标签页跳转。你可以在浏览器开发者工具里查看生成的<a>标签，确认href属性是否正确设置。

内容的提问来源于stack exchange，提问作者cts