Ссылки 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>

Answer 1

Для этого вам нужно обновить опору со «ссылки» до «а».

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

Пожалуйста, найдите ссылку на песочницу

Также, если вы не слишком много настраиваете и добавляете пользовательский рендерер только для открытия ссылки в новой вкладке. Вы можете использовать опору linkTarget и установить для нее значение _blank.

Answer 2

Вы можете использоватьlinkTargetтеперь, чтобы ваша ссылка открывалась в новой вкладке:

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