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

我在一个表单元格上有一个onClick（React）处理程序，可以正常启动，但是我想维护“在新选项卡中打开”功能，在标记上有一个

href

当然，尝试在单个元素上同时使用这两种元素并不能达到预期效果：

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

…一些内容

之前，我研究过在表格单元格中嵌套一个锚定标记，使其跨越整个高度，因此每当右键单击单元格内容时，我都可以“在新选项卡中打开”，并且仍然在表格单元格元素上保留一个

onClick

处理程序。然而，这种方法存在各种各样的问题

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

因此，我放弃了上述方法。想法/建议？

---

有没有一种方法可以让选项“在新选项卡中打开”而不必使用锚定/href？

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

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

window.open（“someLink”，“_blank”）}>text

但更好的选择是使用常规链接，但将其样式设置为表格单元格：

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

---

React+TypeScript内联util方法：

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

---

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

target={"_blank"}

---

@gunn的答案是正确的，

target=“\u blank

在新选项卡中打开链接

但这可能会给您的页面带来安全风险；您可以阅读相关内容。有一个简单的解决方案：添加

rel=“noopener noreferrer”

最安全的解决方案，仅限JS 如alko989所述，

\u blank

（）存在一个重大安全漏洞

要避免使用纯JS代码，请执行以下操作：

const openInNewTab=（url）=>{
const newWindow=window.open（url“_blank”、“noopener、noreferrer”）
如果（newWindow）newWindow.opener=null
}

然后单击添加到您的

onClick

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

---

根据您的需要，第三个参数也可以使用。

可能是这个参数的副本：href在表格单元格元素上？@RokoC.Buljan是的，我知道这听起来有多奇怪。我只是举个例子。最初它只是一个锚定标记，在表格单元格内有一个

href

，但要使锚定标记跨越整个高度在不影响定位的情况下，这似乎不是一个可行的选择。哇，安全问题很大。它到底做了什么？

if（newWindow）newWindow.opener=null

我尝试console.log newWindow，但它总是返回null。我不确定哪些上下文返回非null值，但规范是返回窗口引用这是最好的响应

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