在 React 中使用 onClick 处理程序维护 href "open in new tab"

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')}

为了在反应上更简洁，你可以直接返回一个函数

const onClickUrl = (url) => {
return () => openInNewTab(url)
}
onClick={onClickUrl('https://stackoverflow.com')}

对于Typescript+React，如下所示：

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

第三个window.open参数也可以根据需要采用这些可选值。

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 + TypeScriptinline util 方法：

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

Answer 5

以上答案是正确的。但这只是对我有用

target={"_blank"}