使用 this.refs 的弃用警告 [英] Deprecation warning using this.refs

问题描述

我有一个 React 组件，我想在点击时切换一个 css 类.

所以我有这个:

export class myComponent extends React.Component {构造函数(){极好的();this.state = { 点击:false };this.handleClick = this.handleClick.bind(this);}使成为() {返回 (<div><div onClick={this.clicked}><span ref="btn" className="glyphicon"></span></div>

);}句柄点击(){this.refs.btn.classList.toggle('active');}componentDidMount() {this.refs.btn.addEventListener('click', this.handleClick);this.setState({点击:this.state.clicked = true，});}componentWillUnmount() {this.refs.btn.removeEventListener('click', this.handleClick);this.setState({点击:this.state.clicked = false，});}}

这个问题是 ESLint 一直告诉我this.refs"已经折旧了.

我该怎么办?如何修复它以使其不使用折旧的代码?

解决方案

你所指的 Lint 规则叫做 no-string-refs 并警告您:

不推荐在 ref 属性中使用字符串文字 (react/no-string-refs)"

您收到此警告是因为已经实施了使用 refs 的弃用方式(通过使用字符串).根据您的 React 版本，您可以执行以下操作:

React 16.3 及更高版本

constructor() {极好的();this.btnRef= React.createRef();this.state = { 点击:false };this.handleClick = this.handleClick.bind(this);}使成为() {返回 (<div><div onClick={this.addVote}><span ref={this.btnRef} className="glyphicon"></span></div>

);}

<小时>

React 16.2 及更早版本

constructor() {极好的();this.btnRef;//没有必要在这里声明变量，但我喜欢让它更明显.this.state = { 点击:false };this.handleClick = this.handleClick.bind(this);}使成为() {返回 (<div><div onClick={this.addVote}><span ref={(el) =>this.btnRef = el} className="glyphicon">&nbsp;</span></div>

);}

为了更好的可读性，您还可以这样做:

render() {让 myRef = (el) =>this.btnRef = el;返回 (<div><div onClick={this.addVote}><span ref={myRef} className="glyphicon">&nbsp;</span></div>

);}

<小时>

看看官方文档是怎么说的Refs 和 DOM 和 本节 特别是:

<块引用>

旧 API:字符串引用

如果你之前使用过 React，你可能会熟悉一个旧的 API，其中 ref 属性是一个字符串，比如"textInput"，DOM节点作为this.refs.textInput访问.我们建议不要这样做，因为字符串引用有一些问题，被考虑旧版，并且可能会在未来版本之一中删除.如果您当前正在使用 this.refs.textInput 访问 refs，我们推荐回调模式.

I have a React component and I want to toggle a css class when clicked.

So I have this:

export class myComponent extends React.Component {
  constructor() {
    super();
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    return (
      <div>
        <div onClick={this.clicked}><span ref="btn" className="glyphicon">&nbsp;</span></div>
      </div>
    );
  }

  handleClick() {
    this.refs.btn.classList.toggle('active');
  }

  componentDidMount() {
    this.refs.btn.addEventListener('click', this.handleClick);
    this.setState({
      clicked: this.state.clicked = true,
    });
  }

  componentWillUnmount() {
    this.refs.btn.removeEventListener('click', this.handleClick);
    this.setState({
      clicked: this.state.clicked = false,
    });
  }
}

This problem is that ESLint keeps telling me "this.refs" is depreciated.

What do I do instead? How can I fix it so it's not using depreciated code?

解决方案

The Lint rule you are referring to is called no-string-refs and warns you with:

"Using string literals in ref attributes is deprecated (react/no-string-refs)"

You are getting this warning because have implemented the deprecated way of using refs (by using strings). Depending on your React version, you can do:

React 16.3 and later

constructor() {
  super();
  this.btnRef= React.createRef();
  this.state = { clicked: false };
  this.handleClick = this.handleClick.bind(this);
}

render() {
  return (
    <div>
      <div onClick={this.addVote}><span ref={this.btnRef} className="glyphicon">&nbsp;</span></div>
    </div>
  );
}

---

React 16.2 and older

constructor() {
  super();
  this.btnRef;  //not necessary to declare the variable here, but I like to make it more visible.
  this.state = { clicked: false };
  this.handleClick = this.handleClick.bind(this);
}

render() {
  return (
    <div>
      <div onClick={this.addVote}><span ref={(el) => this.btnRef = el} className="glyphicon">&nbsp;</span></div>
    </div>
  );
}

For even better readability, you could also do:

render() {
  let myRef = (el) => this.btnRef = el;
  return (
    <div>
      <div onClick={this.addVote}><span ref={myRef} className="glyphicon">&nbsp;</span></div>
    </div>
  );
}

---

Have a look at what the official documentation says on Refs and the DOM, and this section in particular:

Legacy API: String Refs

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you're currently using this.refs.textInput to access refs, we recommend the callback pattern instead.

这篇关于使用 this.refs 的弃用警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！