Implementar la función de desplazamiento hacia abajo en React

1. La función de desplazamiento hacia abajo en React
2. Crear componentes de clase para implementar la función de desplazamiento hacia abajo en React
3. Cree componentes funcionales para implementar la función de desplazamiento hacia abajo en React

Las aplicaciones modernas a veces están sobrecargadas de información, por lo que el desplazamiento es una de las características que ayudan a los desarrolladores a administrar la atención de los clientes y brindar una buena experiencia de usuario.

React es una biblioteca para crear aplicaciones ultrarrápidas de una sola página. Los desarrolladores de React pueden crear aplicaciones con características modernas para brindar la mejor experiencia de usuario.

Naturalmente, puede haber una pregunta, ¿cómo implementar funciones de desplazamiento en React? Este artículo explorará cómo agregar la función desplazarse hacia abajo en React.

La función de desplazamiento hacia abajo en React

Para implementar un desplazamiento automático al final de un elemento contenedor en React, usaremos refs y el método nativo Element.scrollIntoView().

Definición de refs en React

Los desarrolladores web generalmente usan refs para almacenar una referencia a un elemento HTML en una variable. Pueden usar esta variable en sus funciones y métodos de JavaScript.

En resumen, refs facilita el trabajo con elementos en JavaScript.

Dado que React no trata con DOM directamente, los documentos oficiales de la biblioteca recomiendan usar la menor cantidad posible de refs. Aún así, las refs son necesarias si desea desplazarse hasta el final de un contenedor en React.

La interfaz Elemento nos permite llamar a métodos en los propios elementos. El scrollIntoView() es uno de esos métodos que podemos usar para forzar el desplazamiento a un elemento en particular para asegurarnos de que aparezca en la pantalla del usuario.

Como habrás adivinado, usaremos refs para especificar en qué elemento nos queremos enfocar.

Crear componentes de clase para implementar la función de desplazamiento hacia abajo en React

Desde la introducción de la sintaxis de ES6, los desarrolladores de React pueden escribir fácilmente componentes de clase. Exploremos cómo implementar una función de desplazamiento hacia abajo en los componentes de la clase React sin más preámbulos.

class Messages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [
        "message 1",
        "message 2",
        "message 3",
        "message 4",
        "message 5",
        "message 6",
        "message 7",
        "message 8",
        "message 9",
        "message 10",
        "message 11",
        "message 12",
        "message 13",
        "message 14",
        "message 15",
        "message 16",
        "message 17",
        "message 18"
      ]
    };
  }
  messagesEndRef = React.createRef();

  componentDidMount() {
    this.scrollToBottom();
  }
  componentDidUpdate() {
    this.scrollToBottom();
  }
  scrollToBottom = () => {
    this.messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  };
  render() {
    return (
      <div>
        {this.state.messages.map((message) => (
          <h1>{message}</h1>
        ))}
        <div ref={this.messagesEndRef} />
      </div>
    );
  }
}
export default Messages;

Si revisa esta demostración en vivo, notará que en esta aplicación, tenemos un contenedor desplazable lleno de elementos <h1> destinados a representar los mensajes en su aplicación. Cada vez que la aplicación se recarga, el usuario es llevado automáticamente al final de la página.

Entonces, si tiene un chat en línea, puede implementar esta función para llevarlos a los mensajes más recientes en la parte inferior cada vez que recargan la página.

Ahora, vamos a digerir lo que sucede en el código.

1. Aquí tenemos un componente de clase Mensajes. Primero, creamos una variable messagesEndRef y la configuramos en el método React.createRef() para inicializar la ref.

2. Luego, creamos un elemento <div> vacío en la parte inferior del contenedor y establecemos su atributo ref en this.messagesEndRef.

   Esto es necesario porque un <div> vacío no ocupa espacio, por lo que no se notará a simple vista. Al colocarlo después de los elementos <h1>, nos aseguramos de que siempre será el último elemento en el contenedor principal.

   Por lo tanto, es un elemento perfecto para usar como punto de referencia para desplazarse hasta la parte inferior.

3. En JSX, las llaves son necesarias para escribir cualquier expresión de JavaScript, como hacer referencia a la propiedad messagesEndRef de una instancia de clase.

   Para el siguiente paso, debemos escribir una función scrollToBottom() para desplazarnos hasta el final. Dentro de esta función accedemos a la propiedad actual de la variable messagesEndRef y llamamos al método scrollIntoView().

   No es necesario, pero podemos especificar que el desplazamiento debe ser suave. Esta opción proporcionará una experiencia de usuario mucho mejor.

4. Luego, usamos los métodos de ciclo de vida, componentDidMount() y componentDidUpdate(), para llamar al método scrollToBottom() definido en esta clase. El método de ciclo de vida componentDidMount() ejecutará esta función cada vez que se cargue el componente.

   Entonces, cada vez que los usuarios cargan su aplicación de mensajería, serán llevados al final para leer el mensaje más reciente. El método de ciclo de vida componentDidUpdate() llamará a esta función cuando cambie la propiedad de estado.

   Cada vez que se agrega un nuevo mensaje al estado, el componente se volverá a representar y llevará al usuario al mensaje más reciente.

5. Finalmente, devolvemos un contenedor simple <div>. Aquí, repasamos todos los valores en la propiedad state y los mostramos como elementos <h1>.

   También tenemos un <div> vacío, que usamos como punto de anclaje para decirle a React dónde desplazarse.

Cree componentes funcionales para implementar la función de desplazamiento hacia abajo en React

Desde el lanzamiento de React v16.8, los componentes funcionales tienen todas las características que solían ser exclusivas de los componentes Class.

Específicamente, puede usar la función useState() para inicializar el estado en componentes funcionales. El gancho useRef() puede reemplazar los métodos de estilo de vida del ejemplo anterior.

Además, en lugar del método createRef(), importamos el enlace useRef() del paquete principal react.

import React, { useEffect, useRef, useState } from 'react'

const Messenger = () => {
  const [messages, setMessages] = useState([
        "message 1",
        "message 2",
        "message 3",
        "message 4",
        "message 5",
        "message 6",
        "message 7",
        "message 8",
        "message 9",
        "message 10",
        "message 11",
        "message 12",
        "message 13",
        "message 14",
        "message 15",
        "message 16",
        "message 17",
        "message 18"
      ])
  const bottom = useRef(null)

  const scrollToBottom = () => {
    bottom.current.scrollIntoView({ behavior: "smooth" })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages]);

  return (
    <div>
          {messages.map(message => <h1>{message}</h1>)}
          <div ref={bottom}></div>
    </div>
  )
}

Ahora, vamos a digerir el ejemplo de código anterior.

1. Primero, inicializamos el estado y lo configuramos igual a la matriz de mensajes. El enlace useState() también creó una función de actualización, por lo que podemos agregar más mensajes si es necesario.

2. Luego, inicializamos un ref usando el enlace useRef() y lo almacenamos en la variable bottom. Establecemos el atributo ref de un div vacío igual a esta variable. No olvides usar llaves.

3. Luego, implementamos la función scrollToBottom, que es casi idéntica a la función del ejemplo anterior.

   Accedemos a la propiedad actual del ref y al método scrollIntoView(). Aquí también agregamos una opción de desplazamiento suave.

4. Finalmente, usamos el enlace useEffect() para reemplazar dos métodos de ciclo de vida anteriores.

   El gancho toma dos argumentos, y uno es la función que se ejecutará cada vez que se monte el componente. El segundo argumento es una matriz de variables de estado a tener en cuenta.

   Si el valor de la variable de estado messages cambia, useEffect() también ejecutará la función. Esto logra el mismo resultado que usar el enlace de ciclo de vida componentDidUpdate().