jsx-a11y/anchor-is-valid 警告处理

最新推荐文章于 2022-02-08 11:12:13 发布
最新推荐文章于 2022-02-08 11:12:13 发布
阅读量1.4k 收藏
点赞数 1
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ss1106404013/article/details/116916588
版权

The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid

在react 中有时候需要用到 a 标签的属性，但是不需要跳转，在普通js 中可以给href 赋值，javascript:; javascript:void(0); 等方式，在react eslint 模式下，就会报出非法地址。

解决方式： href =’#!’

VansJeng
关注
eslint-plugin-jsx-a11y：JSX元素上的a11y规则的静态AST检查器
02-05
eslint-plugin-jsx-a11y 静态AST检查器，用于JSX元素上的可访问性规则。 用阅读。 为什么？ Ryan Florence建立了这个很棒的运行时分析工具，称为 。 超级有用。 但是，由于您可能已经在项目中使用了linting，因此该插件是免费提供的，并且更接近于实际的开发过程。 将此插件与编辑器lint插件配对，可以将可访问性标准实时烘烤到应用程序中。 注意：该项目不会替代react-a11y，但可以并且应该与其结合使用。 静态分析工具无法确定运行时之前放置在prop中的变量的值，因此，如果未定义该值和/或未通过lint规则，则插入操作不会失败。 安装 如果您
一段eslint jsx-a11y/anchor-is-valid警告背后的原因
u014165391的博客
12-08 836
我们在做React项目时，经常用到a标签做一些跳转动作，但是每次eslint都要提示 jsx-a11y/anchor-is-valid这段代码，我们可以通过/* eslint-disable jsx-a11y/anchor-is-valid */把这个规则屏蔽掉，但是显然不够优化，那到底是什么原因导致的呢？ 接下来我们打开以下这个链接，它详细的讲解了导致该现象的原因，以及我们该如何更好的处理这个问题。eslint-plugin-jsx-a11y/anchor-is-valid.md at 4abc751
eslint jsx-a11y校验报错
jjh0901的博客
11-05 3641
在集成Airbnb规则下，采用import和export时会报如下错误 Definition for rule ‘jsx-a11y/label-has-associated-control’ was not found eslint(jsx-a11y/label-has-associated-control) 本想在.eslintrc中关闭jsx-a11y/label-has-associated-control规则，但是关闭后还是会报如下错误 Definition for rule ‘jsx-a1
react中常见错误收集
感恩、奋进、自信
03-13 2592
1、错误：index.js:3 Uncaught TypeError: Class extends value undefined is not a constructor or null 截图如下： 错误提示：类继承的值为undefined，不是一个构造器 代码如下：将Component写成小写的component，就会出现下面的错误；或者将Component单词写错也会出现下面的提示 ...
ESLint如何配置
面向许三多编程
04-05 1136
1.简介 通过用 ESLint 来检查一些规则，我们可以： 统一代码风格规则，如：代码缩进用几个空格；是否用驼峰命名法来命名变量和函数名等。 减少错误， 如：相等比较必须用 === ，变量在使用前必须被声明，在条件语句中不能使用赋值语句等。 提高代码质量，如：函数最多有多少条件分支；最多有几个参数，代码块最多能嵌套多少层等。 2.安装 1 安装 ESLint 的依赖。 npm install ...
jsx-runtime:JSX运行时
05-22
使用jsx-runtime 添加jsx-runtime作为依赖项： npm i @pinuts/jsx-runtime --save 要在任意模块中使用运行时，请像这样导入JSX，以将其添加到当前作用域中： import JSX from '@pinuts/jsx-runtime' ; function...
styled-jsx-plugin-sass:插件将Sass支持添加到styled-jsx
04-29
Thream / styled-jsx-plugin-sass 插件将支持添加到 。 :scroll: 关于 将与 :collision: 该存储库最初是从派生的，其目的不是为了功劳，而是从现在开始改进代码。 :floppy_disk: 安装 安装软件包和所需的node-...
vue-jsx-hot-loader-使用JSX渲染功能为Vue.js组件启用HMR。-Vue.js开发
05-27
vue-jsx-hot-loader适用于：使用Vue的JSX渲染功能时，此加载器将启用Webpack的热模块替换。 安装npm inst vue-jsx-hot-loader适用于：使用Vue的JSX渲染功能时，此加载器将启用Webpack的热模块替换。 安装npm install...
babel-plugin-jsx-采用
01-31
babel-plugin-jsx-采用 这个插件转换adopt调用来渲染道具。 基于想法。 :warning_selector: 实验性的：您可能要编写的代码应该进行正确的转换，可能尚不涉及卷积/边缘情况。 例 输入值 const Example = ( ) => { ...
React高级指引：无障碍
Dominic2583的博客
10-23 1454
无障碍为什么要使用无障碍辅助功能标准和指南WCAGWAI-ARIA语义化的HTML 上一节：以React的方式思考 下一节：代码分割 为什么要使用无障碍辅助功能 网络无障碍辅助功能（也成为a11y）能够被任何人使用的网站功能。无障碍辅助功能是允许辅助性技术解释网站所必需的。 React通过使用标准HTML技术支持构建无障碍辅助网站。 标准和指南 WCAG 网络内容无障碍指南( Web Conten...
React项目中使用a标签警告解决办法
weixin_48885013的博客
02-08 1234
警告描述： 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
ESLint对a标签href属性警告解决方法
ZWQ0325的博客
03-13 1万+
一、问题解决方法 1、环境介绍： 通过React的官方教程 Create-React-App使用脚手架工具搭建的工程，然后添加了路由组件React-Router，样式组件Antd Design（简称antd）。 在antd的的Table组件中是这样添加行操作的 <a href="javascript:;">{text}</a> 2、警告描述： The href attri...
Definition for rule 'vue/no-parsing-error' was not found 问题解决
热门推荐
幽幽残月 之 人间正道是沧桑
05-18 1万+
在使用vue是经常会碰到这个问题： Definition for rule 'vue/no-parsing-error' was not found 网络各种方法，如： 没办法，再去考虑vscode配置，在.eslintrc.js中添加的规则 rules:{ 'vue/no-parsing-error': [2, { "x-invalid-end-tag"...
react项目中使用Link遇到的问题
赵乘风_i
08-03 6490
link路由跳转的遇到的问题：           1: 使用query,data等进行传值，可以在另一个页面拿到值，但是to的跳转不起作用                        解决： 1.去掉link,加点击函数，使用this.props.history.push('./xxxxx')，参数有 to,query,data等。                            ...
React项目中 ESLint对a标签href属性警告解决方法
北冥の魚
05-19 3025
警告描述： 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 s
react-starter-kit 学习之eslint 规则
www 你所不知道的
10-31 1018
react-starter-kit 学习之eslint 规则react-start-kit 是一个全栈的开发模板。前端配置了webpack + react 后端配置 express + sqlite + graphql 等，看到react-starter-kit过程中有很多坑。需要一个一个的走过。记录自己学习的历程，在开发过程中还是需要eslint，这是自我对代码风格的一种规范。react-star
Can't open url: cloudwise-agent://timing
最新发布
06-08
```jsx source={{ uri: "cloudwise-agent://timing" }} mixedContentMode="always" /> ``` 或者你可以使用shouldOverrideUrlLoading方法来拦截该协议并作出相应处理： ```jsx source={{ uri: "cloudwise-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值