javascript - logo - Advertencia de desaprobación utilizando this.refs

react js vs angular

Question

Tengo un componente React y quiero cambiar una clase css cuando se hace clic.

Así que tengo esto:

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

Este problema es que ESLint me sigue diciendo que "this.refs" está depreciado.

¿Qué hago en lugar de eso? ¿Cómo puedo solucionarlo para que no esté utilizando el código depreciado?

Answer 1

La regla de Lint a la que se refiere se llama no-string-refs y le advierte con:

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

Está recibiendo esta advertencia porque ha implementado la forma obsoleta de usar refs (mediante el uso de cadenas). Dependiendo de tu versión React, puedes hacer:

Reaccionar 16.3 y posteriores

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

Reaccionar 16.2 y mayores

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

Para una mejor legibilidad, también puedes hacer:

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

Eche un vistazo a lo que dice la documentación oficial en Refs y el DOM , y esta sección en particular:

API heredada: cadenas de referencias

Si trabajó con React anteriormente, podría estar familiarizado con una API anterior donde el atributo ref es una cadena, como "textInput" , y se accede al nodo DOM como this.refs.textInput . No lo aconsejamos porque las referencias de cadena tienen algunos problemas , se consideran heredados y es probable que se eliminen en una de las futuras versiones . Si actualmente está usando this.refs.textInput para acceder a las referencias, le recomendamos el patrón de devolución de llamada.

Answer 2

Puedes probar de una manera más declarativa. Cambié tu código para reflejar esto. Solo debe recordar que un componente se actualizará y llamará el renderizado en cada cambio de estado / apoyo. Entonces, podemos crear la clase de su elemento dentro del método de render.

import React from ''react''

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

  render() {
    let btnClass = ''glyphicon''
    if(this.state.clicked){
      btnClass+='' active''
    }
    return (
      <div>
        <div onClick={this.handleClick}><span ref="btn" className={btnClass}>&nbsp;</span></div>
      </div>
    );
  }

  handleClick() {
    this.setState({
      clicked: !this.state.clicked
    })
  }
}