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

问题描述

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

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

所以我有这个：

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,
    });
  }
}

这个问题是ESLint一直告诉我这个。 refs已折旧。

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?

推荐答案

您所指的Lint规则称为 no-string-refs 并警告：

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)"

您收到此警告是因为已实施弃用的方式 refs （使用字符串）。根据你的React版本，你可以这样做：

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:

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及更早版

---

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>
  );
}

---

看看有什么官方文档说明 参考和DOM 和本节特别是：

旧版API：字符串参考

如果您之前使用过React，那么您可能需要熟悉旧API的
，其中 ref 属性是一个字符串，例如
textInput，DOM节点作为 this.refs.textInput 进行访问。我们b $ b建议反对它，因为字符串引用有一些问题，被认为是b $ b旧版，很可能会在未来的某个版本中删除。如果
你当前正在使用 this.refs.textInput 来访问refs，我们
推荐回调模式。

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屋！