# React技巧之设置target=_blank
原文链接：https://bobbyhadz.com/blog/react-set-target-blank (opens new window)
作者：Borislav Hadzhiev (opens new window)
正文从这开始~
# 设置target=_blank
在React中将元素的target属性设置为_blank ，可以使用锚元素并设置rel属性。比如说，<a href="https://example.com" target="_blank" rel="noopener noreferrer"> 。_blank 值意味着资源在新的标签页被加载。
export default function App() {
const openInNewTab = url => {
// 👇️ setting target to _blank with window.open
window.open(url, '_blank', 'noopener,noreferrer');
};
return (
<div>
{/* 👇️ setting target to _blank on a link */}
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Example.com
</a>
<hr />
<button onClick={() => openInNewTab('https://example.com')}>
Example.com
</button>
</div>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
需要注意的是，当设置target属性为_blank时，需要将rel属性设置为noopener noreferrer 。
rel属性的noopener 关键字指示浏览器导航到目标资源，而不授予新的浏览上下文对打开它的文档的访问权。
当a标签元素的target属性被设置为_blank时，资源在新的标签页被加载。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Example.com
</a>
1
2
3
2
3
或者说，当使用window.open() 函数时，你可以将target属性设置为_blank。
export default function App() {
const openInNewTab = url => {
// 👇️ setting target to _blank with window.open
window.open(url, '_blank', 'noopener,noreferrer');
};
return (
<div>
<button onClick={() => openInNewTab('https://example.com')}>
Example.com
</button>
</div>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
window对象上的open()方法加载指定的资源到新的或者已存在的标签页。
我们将以下3个参数传递给open()方法：
| 名称 | 描述 |
|---|---|
| url | 被加载的资源的url或者路径 |
| target | 资源被加载到的浏览器上下文的名称。_blank 属性值意味着资源在新的标签页被加载。 |
| windowFeatures | 一个用逗号分隔的窗口特征列表。在例子中用于增加安全性。 |
当用户点击button按钮时，我们为onClick属性传递的函数将被执行，并且指定页将会在新标签页加载。
# 总结
通过设置target属性为_blank，我们在新标签页中打开了资源。一共介绍了两种方式：一种是为a标签元素设置属性，另一种是为window.open()方法传入参数。