由[eslint] Using this.refs is deprecated. (react/no-string-refs)引发的refs语法更正

最新推荐文章于 2021-03-29 10:19:58 发布

vuvivian

最新推荐文章于 2021-03-29 10:19:58 发布

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/vuvivian/article/details/83865909

React 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了React中Ref的使用方式从旧版的字符串引用到新版箭头函数引用的转变，避免了使用字符串Ref的警告，并展示了如何在组件中正确地获取和使用Ref。

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

我们习惯于这样使用ref：
①定义

<PanGrid
			    ref="listPanGrid"
				dataSource={this.state.listData}
				configCols={this.state.listColumns}
				statistics={listStatistics}
				checkboxCell={true}
				orderCell={true}
				onFire={{eventType: 'onRowSelected', callback: this.onMainFire.bind(this)}}
		/>

②使用

	listColumn = (e) => {
		e.stopPropagation();
		const panGrid = this.refs.listPanGrid;
		panGrid.toggleToolPanel();
		addPropagation();
	};

这样使用的产生的错误便是：
[eslint] Using this.refs is deprecated. (react/no-string-refs)
这是因为react已不建议这样的语法。
最新的语法为：
①定义

<PanGrid
			   ref={(grid) => {this.listPanGrid = grid}}
				dataSource={this.state.listData}
				configCols={this.state.listColumns}
				statistics={listStatistics}
				checkboxCell={true}
				orderCell={true}
				onFire={{eventType: 'onRowSelected', callback: this.onMainFire.bind(this)}}
		/>

②使用

 	listColumn = (e) => {
		e.stopPropagation();
	   this.listPanGrid.toggleToolPanel();//注意这的this.refs.listPanGrid已被替换成this.listPanGrid
	   addPropagation();
	};