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

您的react组件在呈现锚链接时可以调用服务，此服务可以检查URL是内部还是外部。使用此信息，您可以使用类似以下内容进行渲染...

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

正如评论中已经提到的那样，也许HOC更适合于此。

事件在React中冒泡

1 个答案: