ESLint环境下React如何使用ref属性

最新推荐文章于 2024-05-23 13:49:55 发布
最新推荐文章于 2024-05-23 13:49:55 发布
阅读量2.7k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端框架 文章标签： eslint react ref
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/c_kite/article/details/79072311
本文介绍了一种常见的 React 开发中遇到的问题：使用字符串字面量作为 ref 属性值已被废弃，并提供了修改建议。通过将字符串 ref 替换为回调函数形式的 ref，可以避免未来的兼容性问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

错误提示

这里写图片描述
提示的报错为using string literals in ref attributes is deprecated

解决办法

        <div ref={(c) => { this.choicesGroup = c; }} />
react学习——10react中ref属性
ChenJin_2的博客
06-24 332
react学习——10react中ref属性
React 的 12 条基本 ESLint 规则
分享身边生活经验blog
10-15 1807
ESLint 有一套全面的 JavaScript 代码规则，涵盖风格选择并防止常见错误。单独使用 ESLint 可以提升你的项目，但是有一些 ESLint 插件可用于添加特定于 React 的规则，这将帮助你编写可靠的 React 应用程序。在这篇文章中，我们将讨论这些 ESLint 规则和插件，包括它们适用于 Hooks 的情况。这里有一些快速链接供您跳转：React Hooks 规则 ( eslint-plugin-react-hooks)反应规则 ( eslint-plugin-react)
React 添加eslint检测
mazaiting的博客
08-02 1033
1). 添加包 npm install eslint --save-dev npm install eslint-config-airbnb --save-dev npm install eslint-plugin-import --save-dev npm install eslint-plugin-jsx-a11y --save-dev npm ins...
react 使用 ref 报错 ，[eslint] Using string literals in ref attributes is deprecated. (react/no-string-...
weixin_34292924的博客
08-19 449
react 项目中给指定元素加事件，使用到 react 的 ref 属性，Eslink 报错[eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs) 常用方法：（会报错） var Hello = createReactClass({ componentDidMou...
React ref属性
kk的博客
12-17 743
React ref属性
（转）react 使用 ref 报错 ，[eslint] Using string literals in ref attributes is deprecated. (react/no-string...
weixin_30483697的博客
10-09 552
原文地址：https://www.cnblogs.com/gangerdai/p/7396226.html react 项目中给指定元素加事件，使用到 react 的 ref 属性，Eslink 报错[eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs) 常用方法：...
前端项目(React)接入eslint静态代码检查及一些问题解决方案
LYFlied的博客
03-29 4329
Using this.refs is deprecated Using string literals in ref attributes is deprecated ‘xxx‘ is missing in props validation和 组件变量 is assigned a value but never used 解决方案 eslint安装配置初始化检验代码
Reac项目中常用的Eslint校验规则
weixin_38884718的博客
05-21 857
常用的Eslint校验规则 什么是EsLint Eslint简单来说就是编码规范,能够对js、ts、jsx等进行规范性校验，类似的还有：jslint,tslint…(tslint已停止维护) 在项目中使用Eslint 1、在项目中添加eslint： npm install eslint --save-dev 2、在项目中添加eslint的配置文件(运行后，有一些配置项需自己选择，可根据需要自行选择，执行完成后，会在项目根目录生成eslintrc.js) npx eslint
react 学习笔记
11-16
在 React 中，可以使用 ref 属性来绑定到 render() 输出的任何组件上。ref 属性可以引用 render() 返回的相应的支撑实例，从而确保在任何时间总是拿到正确的实例。 五、Webpack、Babel、React、Ant Design 配置单...
使用 React 和 ECharts 创建地球模拟扩散和飞线效果
最新发布
m0_73117087的博客
05-23 1万+
在本博客中，我们将学习如何使用 React 和 ECharts 创建一个酷炫的地球模拟扩散效果。我们将使用 ECharts 作为可视化库，以及 React 来构建我们的应用。地球贴图在文章的结尾。
ref 属性使用eslint报错
weixin_30525825的博客
09-27 550
react 使用 ref 报错 ，[eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs) 报错1: var Hello = createReactClass({ componentDidMount: function() { var component = ...
React 中ref 属性
weixin_45677987的博客
06-29 725
React 组件中的ref 属性： 1: 通过类创建组件 class Person extends React.Component { showData = () => { let input = document.getElementById('input'); alert ("input.value"); // 所以在showData 方法就可以直接使用: this.refs.input 拿到当前DOM的值。 } render() { re
ref操作dom：Using string literals in ref attributes is deprecated
sinat_41747081的博客
10-22 1265
react如何用ref操作dom？我最开始的写法： <div styleName="date" ref="date" > </div> 然后通过this.refs.date获取这个div元素，结果代码校验时，提示： 修改： <div styleName="date" ref={this.dateRef} > &lt...
由[eslint] Using this.refs is deprecated. (react/no-string-refs)引发的refs语法更正
Software's Blog
02-09 381
refs不再使用
彻底搞懂ESLint
我叫火柴
07-16 2727
ESLint是在ECMAScript/JavaScript代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。通俗的讲就是让代码风格统一(更在意js代码质量)。
React之Refs&DOM
百岁如流富贵冷灰的博客
03-11 645
因为前两个月的新冠疫情公司的开工时间都有延迟，在家里待着蹭吃蹭喝逐渐忘记自己还是一个IT从业人员，复工之后才逐渐回神，想起自己还有博客。哈哈哈 最近开发时遇到了关于ref的使用，看了文档之后了解到refs的使用在16.3版本之后已经出现了变更，就此记录一下 16.3之后版本的Ref推荐用法(React.createRef())： 1.简单使用： // 代码引入了typeScript //...
React中ref属性的使用
suwu150
05-29 6856
1、在ref使用的过程中，需要注意的是： 0.14.8版本及以前用 this.getDOMNode() 或者 this.findDOMNode(this.refs.tip) 15.0版本后用 ReactDOM.findDOMNode(this.refs.tip); 2、我们通过代码进行对ref的学习：如下面代码： &lt;html&gt; &lt;head&gt; &lt;m...
react 使用 eslint 的三种代码检查方案总结，多了解点--让代码更完美....
小结巴巴的博客
09-26 1711
  1、介绍       ESLint 是一个可扩展，每条规则独立，被设计为完全可配置的lint工具。     可以用来检测代码，避免低级错误     可以用来规范代码的开发风格，统一代码习惯。     2、为什么使用 ESLint ？       统一代码规范 :     在开发中，可能会遇到很多不同的同事同时开发一个项目 ，或者在工作的调整中，会有接手一个项目，...
使用React实现的图片裁剪组件
`create-react-app` 是一个官方提供的脚手架工具，用于快速初始化一个React应用，它集成了Webpack、Babel等工具，提供了ESLint支持以及热重载功能，极大地简化了开发流程。在开始项目之前，开发者需要先全局安装`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值