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

Question

我有一个使用 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 的反模式直接地。

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

Answer 1

您可以使用 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 示例中输入了这个，没有时间测试它。这有效吗？