javascript - elementref - viewchild undefined angular 6

this.refs.something devuelve "undefined"

Question

Tengo un elemento con una ref que se define y termina siendo procesado en la página:

    <div ref="russian" ...>
       ...
    </div>

Quiero acceder a las propiedades del elemento DOM como offset... o algo así. Sin embargo, sigo undefined y no tengo la menor idea de por qué. Después de algunas búsquedas, queda claro que las refs solo son aplicables a un archivo, pero no estoy usando esto en ningún lado, aparte de esta página. Estoy diciendo esto para registrarlo:

console.log(''REFS'', this.refs.russian);

¿Qué podría estar causando esto?

Answer 1

Actualización desde la versión 16.4 de React.

En tu método constructor define tu referencia como esta

constructor(props) {
  super(props);
  this.russian = React.createRef();
}

En tu render donde estés usando ref haz esto.

<input
  name="russian"
  ref={this.russian} // Proper way to assign ref in react ver 16.4
/>  

Por ejemplo, si desea tener enfoque cuando los montajes de componentes hacen esto

componentDidMount() {
  console.log(this.russian); 
  this.russian.current.focus();
 }

Referencia Refs Documentación Reaccionar

Answer 2

Compruebe que no está accediendo a la referencia antes de que se haya montado el componente secundario. Por ejemplo, no funciona en componentWillMount . Un patrón diferente que invoca automáticamente la devolución de llamada relacionada con la referencia después de que el elemento ha sido montado es este:

<div ref={(elem)=>(console.log(elem))}/>

También puede utilizar esta notación para obtener elementos montados en el anidamiento profundo:

<div ref={this.props.onMounted}/>

Answer 3

El lugar correcto para trabajar con las refs es dentro de los métodos específicos del ciclo de vida de React, por ejemplo, ComponentDidUpdate , ComponentDidUpdate

No puede hacer referencia a refs desde el método render() . Lea más sobre las precauciones de trabajar con refs aquí.

Si mueve su console.log(''REFS'', this.refs.russian); llame a los métodos del ciclo de vida de ComponentDidMount o ComponentDidUpdate (suponiendo que está en React> = 14), como resultado, no debe quedar indefinido .

ACTUALIZACIÓN: también las referencias no funcionarán en componentes sin estado según el enlace de precaución anterior