解决 react <a> 标签 href=“javascript:“ console warning 问题

项目场景:

我们在使用 a 标签时,href属性可以用于指定超链接目标的 URL,其值可以使任何有效文档的相对的或绝对的 URL,包括片段标识符和 JavaScript 代码段。用户选择了 a 标签中的内容,浏览器会尝试检索并展示 href 属性指定的 url 所表示的文档,或者 执行 JavaScript 表达式、方法和函数的列表。
若用户不想用 a 标签的跳转能力时,而要使用自己绑定的 click 事件,往往会通过插入 js 代码段的方式,设置 href 值为javascript:;或javascript:void(0) 以期达到 href 无跳转的效果。但是这样写代码会被 react 在控制台报如下错误:


console: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed “javascript:;”


问题解决:

网上很多方法都是这样说:

解决办法:属性值使用#或者#!

<a href="javascript:;" onClick={() => this.handleComment()}>123</a>
变成:
<a href="#!" onClick={() => this.handleComment()}>123</a>
或
<a href="#!" onClick={() => this.handleComment()}>123</a>

分析:

报错console确实是解决了,但是hash路由的跳转会导致请求两次接口,因为有参数是认为两次加载


解决方案:

<a href="javascript:;" onClick={() => this.handleComment()}>123</a>
变成
<a href="#!" onClick={(e) => {
	e.preventDefault();
	this.handleComment();
}}>123</a>
在react中,我们可以通过preventDefault来实现阻止跳转
这样解决了报错,同时也阻止href的默认事件!

慢慢积累,慢慢成长,慢慢蜕变。
上一篇:XtraBackup恢复MySQL双主模式的数据同步


下一篇:python进阶(22)pydantic--数据类型校验