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

• HostIN
• Programación
• Cómo obtener el elemento de un componente de React -

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

Índice

1. Método 1: reaccionar-dom
2. Método 2:ref

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:

Índice de contenidos

1. Método 1: reaccionar-dom
2. Método 2:ref

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!

• Cómo ocultar información en imágenes -
• Cómo manejar objetos diferidos en DoCSSa -

Te podría interesar...

Cómo actualizar MySQL en Ubuntu – ThisHosting.Rocks La ciberseguridad preocupa a los CISO y analistas de seguridad en los EE. UU., ya que las organizaciones informan un aumento del 51 % en los ataques El valor de la escucha social para su negocio ¿Qué puedo esperar de Joomla? 5 consejos para mejorar la productividad del trabajo desde casa Rocket.net presenta la primera nube privada para WordPress Las mejores herramientas SaaS de IA para mejorar la productividad empresarial Acordeón MooTools: estilo mouseover - Integrar la IA y el aprendizaje automático en la creación de sitios web en WordPress

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.