使用React中的onClick处理程序维护href"在新选项卡中打开"

Question

我在正常激活的表格单元格上有一个onClick(React)处理程序,但是我想维护"在新标签中打开"功能,该功能可以href在标签上为您提供.

当然,尝试将两者结合在一个元素上并不能正常工作:

<td onClick={this.someFunction} href="someLink">
  ...some content
<td>

之前我研究过嵌套在表格单元格中的锚标记跨越整个高度,因此每当右键单击单元格的内容时,我就可以"在新标签中打开"并仍然onClick在表格单元格元素上保留一个处理程序.然而,这里概述了这种方法的各种问题.

TLDR:覆盖会导致其他问题.解决方案存在各种兼容性问

所以我放弃了上面解释的方法./建议的想法？有没有办法在不必使用锚点/ href的情况下选择"在新标签页中打开"？

Answer 1

这里有两个选项,您可以使用JS在新窗口/选项卡中打开它:

<td onClick={()=> window.open("someLink", "_blank")}>text</td>

但更好的选择是使用常规链接,但将其设置为表格单元格:

<a style={{display: "table-cell"}} href="someLink" target="_blank">text</a>

Answer 2

最安全的解决方案，仅限 JS

正如 alko989 所提到的，存在一个主要的安全漏洞_blank（详情请点击此处）。

从纯 JS 代码中避免它：

const openInNewTab = (url) => {
  const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
  if (newWindow) newWindow.opener = null
}

然后添加到您的 onClick

onClick={() => openInNewTab('https://stackoverflow.com')}

根据您的需要，第三个参数也可以采用这些可选值。

Answer 3

@gunn 的答案是正确的，target="_blank使链接在新选项卡中打开。

但这可能会给您的页面带来安全风险；你可以在这里阅读。有一个简单的解决方案：添加rel="noopener noreferrer".

<a style={{display: "table-cell"}} href = "someLink" target = "_blank" 
rel = "noopener noreferrer">text</a>

Answer 4

React + TypeScript内联 util 方法：

const navigateToExternalUrl = (url: string, shouldOpenNewTab: boolean = true) =>
shouldOpenNewTab ? window.open(url, "_blank") : window.location.href = url;

Answer 5

以上答案是正确的。但这对我来说很有效

target={"_blank"}