尽管使用了 target="_blank"，但 React Markdown 链接不会在新选项卡中打开答案

【问题标题】：React Markdown links dont open in a new tab despite using target="_blank"尽管使用了 target="_blank"，但 React Markdown 链接不会在新选项卡中打开
【发布时间】：2021-11-06 05:09:38
【问题描述】：

小组件如下所示：

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

【问题讨论】：

标签： javascript reactjs hyperlink react-markdown

【解决方案1】：

您需要将道具从“链接”更新为“a”才能实现。

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

请找到sandbox链接

此外，如果您没有进行太多自定义并添加自定义渲染器只是为了在新选项卡中打开链接。您可以使用 'linkTarget' 属性并将其设置为 '_blank'

【讨论】：