2022-02-28 学习记录--React-a标签写了target=‘_blank‘后报错的解决方法

最新推荐文章于 2022-10-08 14:24:26 发布
最新推荐文章于 2022-10-08 14:24:26 发布
阅读量593 收藏 1
点赞数 3
分类专栏： 学习-React 文章标签： 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48850734/article/details/123287335
版权
一、a标签写了target='_blank'后报错的解决方法

在a标签里加上target='_blank'，是为了不在当前窗口打开新页面，另开新窗口。

But

在React里，会报错，解决方法就是：在a标签里再加上rel='noreferrer'就好啦，举例如下图所示：
在这里插入图片描述
These are bilibili尚硅谷React学习视频的 学习笔记~

小呀小萝卜儿
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
常见a标签的错误及解决办法
gercke的博客
12-21 1475
一、在a标签中如果使用了 target=“_blank” target=“_blank” 是一种有漏洞的使用方式 如果要用的话，那么就需要加上 rel=“noopener noreferrer”>，用来阻止漏洞 <a href="http://baidu.com" target="_blank" ref="noopener noreferrer"></a> 二、修改配置 解决办法 运行 npm run eject //添加配置 //在package.json文件中添
2020/09/20 React中获取target（报错信息Warning: This synthetic event is reused for performance reasons.）
Nighsloth的博客
09-20 2419
如下图，我要获取到点击的li 我的代码 return中的内容 函数 —这里要加上 event.persist() 否则只有第一次点击能够获取到target，再次会报错，显示target:null,报错信息：Warning: This synthetic event is reused for performance reasons. 本小白理解太粗泛了，要了解深入点的推荐看这篇 https://www.jianshu.com/p/bf390141fae8 ...
＜a标签导致的报错问题（已解决）
程序猿进化梯
07-12 456
最近在学习江南一点雨的Cool-Meeting项目，遇到一点小问题，表单本应显示如下 可是却出现了乱框框和 不该“红"的属性标红的情况 在searchemoloyees.ftl中 跳转处的表单form，写成了，使得关闭账号（鼠标移动在关闭账号上，字变红）的表示也延伸到了后续的语句上，从而导致乱码和姓名/账号名/电话号码/电子邮件之类的值都变红的问题。所以这里将改为 或者将其改为即可..............................
日常错误积累之<a></a>标签
sinat_24510245的博客
07-04 495
<div class="div_left"> <img alt="微购网" src="images/adv_left.png"> </div> <div class="div_center" align="center"> <% ConnectionDB conDB = new ConnectionDB(); String sql = "SELECT
＜a＞标签打开新页面超链接出现about:blank#blocked
热门推荐
geidongdong的博客
02-04 3万+
target="_blank"改成target=_blank <a href ="输入你的链接" target=_blank>
npx create-react-app xxx创建项目报错的解决办法
10-15
主要介绍了npx create-react-app xxx创建项目报错的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
awesome-react-master.zip_javascript_react-native_tieqqq
09-25
react files for special projects
learning-react-native：React Native学习笔记本
02-05
React Native学习笔记 欢迎您帮忙纠错，一起帮助更多的人，学习交流QQ群： React本机 开发工具 [使用WebStorm调试React Native] [故事书] [reactotron] 节点相关 最佳拍档 原生集成 模拟与测试 [easy-mock介绍] ...
react-native-amap-geolocation：适用于Android + iOS的React Native地理位置模块
02-05
React本机amap地理位置 React Native高德地图定位模块，支持Android + iOS，提供完善的原生接口，同时提供符合Web标准的Geolocation API。 用法 import { PermissionsAndroid } from "react-native" ; import { ...
react-archer:React在React元素之间绘制箭头:fountain_pen:
04-01
React弓箭手 :bow_and_arrow: 在React中的DOM元素之间绘制箭头 :fountain_pen:安装npm install react-archer --save或yarn add react-archer例子 import { ArcherContainer , ArcherElement } from 'react-archer' ...
react-router 里的 Link 标签和 a 标签有什么区别？
zhangwenok的博客
10-08 2373
Link> 是 react-router 里实现路由跳转的链接，一般配合 使用，react-router 会接管Link 的默认链接跳转行为，区别于传统的页面跳转， 的“跳转”行为只会触发相匹配的 对应的页面内容更新，而不会刷新整个页面。而 标签就是普通的超链接了，用于从当前页面跳转到 href 指向的另一个页面（非锚点情况）。从最终渲染的 DOM 来看，这两者都是链接，都是 标签。跳转链接的路径，如 /users/123。
react解析a标签
八皇叔的博客
12-13 786
在所有的<a>标签中添加target="_blank"
weixin_30783629的博客
04-16 455
很简单,只有在<head></head>中添加:<base target="_blank" /> 转载于:https://www.cnblogs.com/yuteng/archive/2010/04/16/1713418.html
react中的a标签href引发重新渲染
weixin_34167043的博客
04-16 7327
现象：<li><a href="#">关于我们</a></li> 点击会使页面刷新，所以改变数据会误以为不生效； 所以要用：<li><a href="javascript:void(0)">关于我们</a></li> <li><a href="#">关于我们</a&...
react、vue、js实现文件下载导出（iframe，form,a标签）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-23 8571
只需要传一个文件下载地址的url即可 downloadFile = (url) => {//下载方法 console.log(url) const iframe = document.createElement("iframe"); iframe.style.display = "none"; // 防止影响页面 iframe.style.height ...
React项目中使用a标签警告解决办法
weixin_48885013的博客
02-08 1168
警告描述： The href attribute is required for an anchor to be keyboard accessible.Provide a valid, navigable address as the href value.If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate st
react之禁止＜a＞标签响应
enjoy.day
06-08 1370
禁用a标签
react fragment ＜＞＜/＞ 快速了解
web_ding的博客
05-24 1169
React.Fragment 官方文档： React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。 Fragments 看起来像空的 JSX 标签： render() { return ( <> <ChildA /> <ChildB /> <ChildC /> </> ); } 一个常见模式是为一.
react-router-dom 通过Link传值的坑人表现!
cen_cs的专栏
11-02 9200
react-router-dom 通过Link传值的坑人表现! link 可以通过以下方式传递到下一个路由:   &lt;Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }}/&gt;   在下一个页面可以这...
react引入js-export-word报错You may need an appropriate loader to handle this file type.
最新发布
08-19
这个报错是因为在编译过程中，遇到了一些语法问题和文件类型处理的错误。根据引用和引用的信息，你可能需要安装file-loader并进行相应的配置。首先，你可以通过命令`npm install file-loader --save`安装file-loader。然后，在.umirc.js配置文件中，你需要添加loader的配置，具体的配置如下所示： ```javascript export default defineConfig({ chainWebpack: (config) => { config.module .rule('html') .test(/\.(html)$/) .use('file-loader') .loader(require.resolve('file-loader')) }, }) ``` 对于引用中提到的问题，报错信息显示了关键字'interface'受到保留的限制。同样的，你可能需要配置相应的loader来处理这种文件类型。可以尝试查看React的官方文档或相关资源，找到适合处理这种文件类型的loader，并进行相应的配置。 综上所述，要解决react引入js-export-word报错"You may need an appropriate loader to handle this file type"，你需要安装file-loader并进行配置。另外，对于"interface"保留字的错误，你可能需要查找适合处理该文件类型的loader，并进行相应的配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [小程序引入外部组件后报loader和ts语法问题的处理](https://blog.csdn.net/LittleMoon_lyy/article/details/125818790)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [umi引用html文件，报loader相关错误](https://blog.csdn.net/weixin_43794073/article/details/127907580)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小呀小萝卜儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值