如何在react上添加target=_blank

在React中，如果你想让一个链接在新窗口或新标签页中打开，你可以使用target="_blank"属性。这个属性是HTML的一部分，而不是特定于React的。当你在React组件中使用它时，行为与在普通的HTML中相同。

基础概念

target="_blank"是HTML中的一个属性，用于指定链接（<a>标签）的打开方式。当设置为_blank时，链接会在新的浏览器窗口或标签页中打开。

优势

• 用户体验：允许用户在不离开当前页面的情况下查看相关链接内容。
• 页面隔离：新打开的页面与原页面相互独立，互不影响。

类型

• target="_blank"：在新窗口或新标签页中打开链接。
• target="_self"：在当前窗口或标签页中打开链接（默认值）。
• target="_parent"：在父框架中打开链接。
• target="_top"：在最顶层的窗口或框架中打开链接。

应用场景

当你希望用户能够方便地查看额外信息，而又不想让他们离开当前页面时，可以使用target="_blank"。例如，博客文章中的参考资料链接，或者产品页面上的详细规格链接。

示例代码

import React from 'react';

function ExternalLink({ href, children }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer">
      {children}
    </a>
  );
}

export default function App() {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <ExternalLink href="https://example.com">Visit Example.com</ExternalLink>
    </div>
  );
}

注意事项

• 安全问题：使用target="_blank"时，应该添加rel="noopener noreferrer"属性。这是为了防止新打开的页面通过window.opener访问原始页面，从而可能引发安全问题。
• 用户体验：确保新打开的页面与原页面的内容是相关的，避免用户感到困惑。

参考链接

• MDN Web Docs: HTML <a> target Attribute

通过上述方法，你可以在React应用中轻松实现链接在新窗口或新标签页中打开的功能。