Cómo obtener el elemento de un componente de React -

JSX es un pseudolenguaje increíble para React y, si soy honesto, es lo que me hizo amar tanto a React. Usar React sin JSX es engorroso y frustrante, mientras que usar JSX es una forma más fácil de expresar su código. Sin embargo, una desventaja de JSX es que hace que el acceso a los elementos componentes sea indirecto, si no es difícil.

La verdad es que acceder a los elementos propios de un componente es mucho más fácil de lo que la mayoría piensa. Veamos cómo un método de componente puede acceder a su propio nodo DOM con JavaScript:

Método 1: reaccionar-dom

reaccionar-dom proporciona un findDomNodemétodo para encontrar el nodo del componente:

// Obtenga ReactDOMimport ReactDOM de "react-dom";// En su componente clase de método MyComponent extends Component { myMethod() { const node = ReactDOM.findDOMNode(this); }}

Con ReactDOM.findDOMNode(this), puedes obtener el nodo principal del widget y desde allí puedes usar métodos DOM típicos:

const node = ReactDOM.findDOMNode(this);// Obtener nodos secundariosif (instancia de nodo de HTMLElement) { const child = node.querySelector('.someClass');}

Esto mezcla un poco de React y manipulación básica de DOM de JavaScript.

Método 2:ref

Otro método para obtener nodos DOM es mediante el uso refde s; se detalla un ejemplo de uso en mipublicación de React y enfoque automático:

class MyComponent extends Component { // El elemento que queremos recuperar _input: ?HTMLInputElement; // .... componenteDidUpdate() { this._input.focus(); } render() { return ( div entrada ref={c = (this._input = c)} / /div ); } }}

Agregar un refatributo al elemento que desea controlar es un enfoque más centrado en React para controlar un elemento. Ambas estrategias funcionan bien, ¡así que elige la que prefieres!