如何在 React 中设置 target=_blank

作者

在 React 中将目标设置为_空白

How to set target=_blank in React

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

应用程序.js
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>
  );
}

反应设置目标空白

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

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

当元素的targetprop设置为时，资源将加载到新选项卡中。a_blank

应用程序.js
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Example.com
</a>

或者，您可以在使用该
功能时设置target为。_blankwindow.open()

应用程序.js
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>
  );
}

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

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

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

当用户点击按钮时，我们传递给onClickprop 的函数将被调用，指定的页面将被加载到一个新的选项卡中。

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

–

发表评论