尽管使用了 target="_blank"，React Markdown 链接仍无法在新选项卡中打开

Question

小组件看起来像这样：

// @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>

Answer 1

您需要将道具从“link”更新为“a”才能实现这一点。

  <ReactMarkdown components={{ a: LinkRenderer}}>
      {children}
  </ReactMarkdown>

Answer 2

您现在可以使用

linkTarget

在新选项卡中打开链接：

<ReactMarkdown linkTarget="_blank" children={...} />

Answer 3

因为我无法发表评论（还没有 50 声誉），请注意维护者即将删除

https://github.com/remarkjs/react-markdown/pull/762 中的 

linkTarget 属性 。使用组件答案可能是将来使用的最佳选择。