迹忆客 专注技术分享

要在 React 中将元素的目标属性设置为 _blank，请使用锚元素并设置 rel 属性，例如 <a href="https://jiyik.com" target="_blank" rel="noopener noreferrer">。 _blank 值表示资源已加载到新选项卡中。

export default function App() {
  const openInNewTab = url => {
    // 👇️ 使用 window.open 将 target 设置为 _blank
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      {/* 👇️ 在链接上将 target 设置为 _blank */}
      <a href="https://jiyik.com" target="_blank" rel="noopener noreferrer">
        jiyik.com
      </a>

      <hr />

      <button onClick={() => openInNewTab('https://jiyik.com')}>
        jiyik.com
      </button>
    </div>
  );
}

请注意，在将 target 设置为 _blank 时，我们必须将 rel 属性设置为 noopener noreferrer。

rel 属性的 noopener 关键字指示浏览器导航到目标资源，而不授予新的浏览上下文访问打开它的文档的权限。

当 a 元素的 target 属性设置为 _blank 时，资源将加载到新选项卡中。

<a href="https://jiyik.com" target="_blank" rel="noopener noreferrer">
  jiyik.com
</a>

或者，我们可以在使用 window.open() 函数时将 target 设置为 _blank。

export default function App() {
  const openInNewTab = url => {
    // 👇️ 使用 window.open 将目标设置为 _blank
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      <button onClick={() => openInNewTab('https://jiyik.com')}>
        Example.com
      </button>
    </div>
  );
}

window 对象的 open() 方法将指定的资源加载到新的或现有的选项卡中。

我们将以下 3 个参数传递给 open() 方法：

• url 要加载的资源的 URL 或路径
• target 资源加载到的浏览上下文的名称。 _blank 值表示资源已加载到新选项卡中。
• windowFeatures 以逗号分隔的窗口功能列表。 在示例中用于增加安全性。

当用户单击按钮时，我们传递给 onClick 属性的函数将被调用，并且指定的页面将被加载到新选项卡中。

通过将 target 设置为 _blank，我们在新选项卡中打开资源。

相关阅读：

• 在 React 的新选项卡中打开链接