时间戳

首页 > 解决方案 > 如何在 React 的新选项卡中打开一些子链接

javascript - 如何在 React 的新选项卡中打开一些子链接

问题描述

我有一个用 React (NextJS) 构建的页面，我正在从 Wordpress 中提取一些标记字符串内容并将其插入到我的JSX.

...
<div className="wrapper">
  <p
     className="text-content"
     dangerouslySetInnerHTML={{ __html: post.content.rendered }}
  ></p>
</div>
...

现在，标记可能包含链接，我想在新选项卡上打开所有这些链接。所以我尝试了：

...
<div className="wrapper">
  <base target="_blank" />
  <p
     className="text-content"
     dangerouslySetInnerHTML={{ __html: post.content.rendered }}
  ></p>
</div>
...

并且标记中的所有链接都在新选项卡上打开，非常棒。但问题是页面中的所有其他链接（包括div.wrapper元素外部的链接）都在新选项卡中打开（因为<base />范围是整个页面），我想防止这种情况发生。

由于我不能<base />在同一页面上使用多个，我知道的另一个选项是遍历感兴趣的锚标记document.querySelector(".wrapper a")并将target属性添加到所有这些标记，但是在 React 中，它是修改 DOM 的反模式直接地。

所以我不确定如何最好地进行。我该怎么办？

标签： javascripthtmlreactjsjsx

解决方案

您可以使用 DOMParser API 来实现这一点。

这是一个小片段

const parser = new DOMParser();
const htmlText = `<div><a href="#some-url">Url link</a></div>`;

let content = parser.parseFromString(htmlText, "text/html");
const anchors = content.getElementsByTagName('a');

Array.from(anchors).forEach(a => { 
    a.setAttribute("target", "_blank");
})


console.log(content.body.innerHTML); // Here it is your new string

代码可能需要改进一下，我刚刚从 MDN 示例中输入了这个，我没有时间测试它。这行得通吗？

推荐阅读