событие бурлит в реакции

Question

Я занимаюсь проектом React.

Однако есть один вопрос.

Я пытаюсь управлять ссылками на странице из одного места.

Например,

если на странице есть внешняя ссылка, откройте новое окно,

, если это ссылка на тот же сайт, она пытается переместиться изнутри.

так,

class App extends Component {
  componentDidMount() {
    document.addEventListener('click', (e) => {
      const target = e.target;
      const aLink = target.closest('a');

      if (aLink && aLink.getAttribute('href')) {
        const href = aLink.getAttribute('href') || '';
        if (href) {
          if (isExternalLink(href)) {
            window.open(href);
            e.preventDefault();
          } else if (isOurLink(href)) {
            //
          } else {
            //
          }
        }
      }
    });
  }
  :

Я хочу это сделать.

Это анти-паттерн?

Answer 1

Ваш компонент реагирования при отображении якорных ссылок может вызывать службу, эта служба может проверять, является ли URL-адрес внутренним или внешним.Используя эту информацию, вы можете рендерить, используя что-то вроде этого ...

public render(): JSX.Element {
    var openInNewTab = someService.IsInternal(props.someUrl);
    return (
        <a href={props.someUrl} target={openInNewTab ? '_blank': ''}>
        </a>
    );
}

Как уже упоминалось в комментариях, возможно, HOC больше подходит для этого.