ref 属性使用eslint报错

最新推荐文章于 2022-09-20 00:11:58 发布

weixin_30525825

最新推荐文章于 2022-09-20 00:11:58 发布

阅读量550

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weilantiankong/p/7603005.html

本文介绍在React中如何避免使用字符串类型的Ref，并提供正确的Ref实现方式，以解决使用字符串Ref时出现的警告。

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

react 使用 ref 报错，[eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs)

报错1:
var Hello = createReactClass({
  componentDidMount: function() {
    var component = this.refs.test;
   
  },
  render: function() {
    return <div ref="test">ref, test.</div>;
  }
});


正确：
var Hello = createReactClass({
2   componentDidMount: function() {
3     var component = this.test;
4    
5   },
6   render() {
7     return <div ref={(c) => { this.test = c; }}>test, ref.</div>;
8   }
9 });