React中的Markdown链接尽管使用了target="_blank"，但仍未在新标签页中打开。

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>

- cts

Answer 1

你需要将属性从“link”更新为“a”来实现该功能。

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

请查看 沙盒链接。

如果您没有进行太多自定义并仅为了在新标签页中打开链接而添加了自定义渲染器，则可以使用'linkTarget'属性并将其设置为'_blank'。

- wolf_codes

Answer 2

现在您可以使用linkTarget来使您的链接在新标签页中打开：

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

- arturo cabrera

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

请注意，维护者即将在https://github.com/remarkjs/react-markdown/pull/762中删除linkTarget属性。在将来使用组件answer可能是最好的选择。 - undefined