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