在前端开发中，我们经常需要处理页面中的链接。其中一个常见的需求就是在链接打开时弹出新的窗口，而非在当前窗口中打开链接。通常情况下，我们会使用 target="_blank" 属性来实现这个目标。但是在 React 中，如果直接在 jsx 中写 target="_blank"，则会有一些安全问题。
幸运的是，我们可以使用一个 npm 包 babel-plugin-jsx-target-blank 来解决这个问题。这个包可以将所有 target="_blank" 自动替换成 rel="noopener noreferrer" target="_blank"，从而避免安全问题。
安装
使用 npm 安装 babel-plugin-jsx-target-blank：
npm install babel-plugin-jsx-target-blank --save-dev
配置
在 .babelrc 中添加以下配置：
{
"plugins": [
["babel-plugin-jsx-target-blank", {
"exclude": ["redirect.html"], // 排除的文件
"warnBlankTargets": true // 是否打印警告
}]
]
}这里我们可以指定需要排除的文件名，并设置是否打印警告。
使用
现在我们可以在 jsx 中愉快地使用 target="_blank" 了：
<a href="https://www.example.com" target="_blank">打开链接</a>
示例代码
为了更好地理解这个包的使用方法，这里提供一个简单的示例代码。
假设我们有一个用于展示新闻列表的组件 NewsList。每条新闻都有一个链接，需要在新窗口中打开。
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - -- ---- -- -- -
------ -
--
-------------- -- -
---- --------------
---------------------
---------------------
-- --------------- --------------------------------
------
---
---
--
-
------ ------- ---------这个组件中的链接使用了 target="_blank"，存在安全问题。现在我们可以使用 babel-plugin-jsx-target-blank 来解决这个问题：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - -- ---- -- -- -
------ -
--
-------------- -- -
---- --------------
---------------------
---------------------
-- --------------------------------
------
---
---
--
-
------ ------- ---------最终在编译后的代码中，所有的链接都会被替换成 rel="noopener noreferrer" target="_blank"。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be181e8991b448e591c