Implementieren Sie die Scroll-to-Bottom-Funktion in React

1. Die Scroll-to-Bottom-Funktion in React
2. Erstellen Sie Klassenkomponenten, um die Scroll-to-Bottom-Funktion in React zu implementieren
3. Erstellen Sie funktionale Komponenten, um die Scroll-to-Bottom-Funktion in React zu implementieren

Moderne Anwendungen sind manchmal mit Informationen überladen, daher ist das Scrollen eine der Funktionen, die Entwicklern helfen, die Aufmerksamkeit der Kunden zu steuern und eine gute Benutzererfahrung zu bieten.

React ist eine Bibliothek zum Erstellen blitzschneller Single-Page-Anwendungen. React-Entwickler können Anwendungen mit modernen Funktionen erstellen, um die beste Benutzererfahrung zu bieten.

Natürlich kann es eine Frage geben, wie man Bildlauffunktionen in React implementiert? In diesem Artikel erfahren Sie, wie Sie die Funktion Nach unten scrollen in React hinzufügen.

Die Scroll-to-Bottom-Funktion in React

Um ein automatisches Scrollen zum Ende eines Container-Elements in React zu implementieren, verwenden wir refs und die native Element.scrollIntoView()-Methode.

Definition von refs in React

Webentwickler verwenden in der Regel refs, um eine Referenz auf ein HTML-Element in einer Variablen zu speichern. Sie können diese Variable in ihren JavaScript-Funktionen und -Methoden verwenden.

Kurz gesagt, refs erleichtern die Arbeit mit Elementen in JavaScript.

Da React sich nicht direkt mit DOM befasst, empfehlen die offiziellen Dokumente der Bibliothek, so wenige refs wie möglich zu verwenden. Dennoch sind refs notwendig, wenn Sie in React zum Ende eines Containers scrollen möchten.

Die Element-Schnittstelle ermöglicht es uns, Methoden für die Elemente selbst aufzurufen. scrollIntoView() ist eine dieser Methoden, mit der wir das Scrollen zu einem bestimmten Element erzwingen können, um sicherzustellen, dass es auf dem Bildschirm des Benutzers erscheint.

Wie Sie vielleicht schon erraten haben, verwenden wir refs, um anzugeben, auf welches Element wir uns konzentrieren möchten.

Erstellen Sie Klassenkomponenten, um die Scroll-to-Bottom-Funktion in React zu implementieren

Seit der Einführung der ES6-Syntax können React-Entwickler ganz einfach Klassenkomponenten schreiben. Lassen Sie uns untersuchen, wie Sie ohne weiteres eine scroll to bottom-Funktion in Komponenten der React-Klasse implementieren können.

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;

Wenn Sie sich diese Live-Demo ansehen, werden Sie feststellen, dass wir in dieser Anwendung einen scrollbaren Container voller <h1>-Elemente haben, die die Nachrichten in Ihrer Anwendung darstellen sollen. Jedes Mal, wenn die Anwendung neu geladen wird, gelangt der Benutzer automatisch zum Ende der Seite.

Wenn Sie also einen Online-Chat haben, können Sie diese Funktion implementieren, um sie bei jedem Neuladen der Seite zu den neuesten Nachrichten unten zu bringen.

Lassen Sie uns nun verdauen, was im Code vor sich geht.

1. Hier haben wir eine Klassenkomponente Messages. Zuerst erstellen wir eine messagesEndRef-Variable und setzen sie auf die React.createRef()-Methode, um die ref zu initialisieren.

2. Dann erstellen wir ein leeres <div>-Element am unteren Rand des Containers und setzen sein ref-Attribut auf this.messagesEndRef.

   Dies ist notwendig, da ein leeres <div> keinen Platz einnimmt und daher mit bloßem Auge nicht wahrnehmbar ist. Indem wir es nach den <h1>-Elementen platzieren, stellen wir sicher, dass es immer das letzte Element im übergeordneten Container ist.

   Daher ist es ein perfektes Element, um es als Referenzpunkt zu verwenden, um nach unten zu scrollen.

3. In JSX sind geschweifte Klammern erforderlich, um einen beliebigen JavaScript-Ausdruck zu schreiben, z. B. um auf die Eigenschaft messagesEndRef einer Klasseninstanz zu verweisen.

   Für den nächsten Schritt müssen wir eine scrollToBottom()-Funktion schreiben, um nach unten zu scrollen. Innerhalb dieser Funktion greifen wir auf die Eigenschaft current der Variable messagesEndRef zu und rufen die Methode scrollIntoView() auf.

   Es ist unnötig, aber wir können angeben, dass der Bildlauf glatt sein soll. Diese Option bietet eine viel bessere Benutzererfahrung.

4. Dann verwenden wir die Lebenszyklusmethoden componentDidMount() und componentDidUpdate(), um die für diese Klasse definierte Methode scrollToBottom() aufzurufen. Die Lebenszyklusmethode componentDidMount() führt diese Funktion jedes Mal aus, wenn die Komponente geladen wird.

   Wenn Benutzer also Ihre Messaging-App laden, werden sie nach unten geleitet, um die neueste Nachricht zu lesen. Die Lebenszyklusmethode componentDidUpdate() ruft diese Funktion auf, wenn sich die Zustandseigenschaft ändert.

   Jedes Mal, wenn dem Status eine neue Nachricht hinzugefügt wird, wird die Komponente neu gerendert und führt den Benutzer zur neuesten Nachricht.

5. Abschließend geben wir einen einfachen <div>-Container zurück. Hier gehen wir alle Werte in der State-Eigenschaft durch und zeigen sie als <h1>-Elemente an.

   Wir haben auch ein leeres <div>, das wir als Ankerpunkt verwenden, um React mitzuteilen, wohin es scrollen soll.

Erstellen Sie funktionale Komponenten, um die Scroll-to-Bottom-Funktion in React zu implementieren

Seit der Veröffentlichung von React v16.8 verfügen Funktionskomponenten über alle Funktionen, die früher nur Klassenkomponenten vorbehalten waren.

Insbesondere können Sie das Feature useState() verwenden, um den Zustand in funktionalen Komponenten zu initialisieren. Der Hook useRef() kann die Lifestyle-Methoden aus dem vorherigen Beispiel ersetzen.

Außerdem importieren wir anstelle der Methode createRef() den Hook useRef() aus dem Kernpaket 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>
  )
}

Lassen Sie uns nun das obige Codebeispiel verdauen.

1. Zuerst initialisieren wir den Zustand und setzen ihn gleich dem Array von Nachrichten. Der useState()-Hook hat auch eine Updater-Funktion erstellt, sodass wir bei Bedarf weitere Nachrichten hinzufügen können.

2. Dann haben wir mit dem Hook useRef() eine ref initialisiert und in der Variablen bottom gespeichert. Wir setzen das Attribut ref eines leeren div gleich dieser Variablen. Vergessen Sie nicht, geschweifte Klammern zu verwenden.

3. Dann implementieren wir die Funktion scrollToBottom, die fast identisch mit der Funktion aus dem vorherigen Beispiel ist.

   Wir greifen auf die Eigenschaft current der ref und die Methode scrollIntoView() zu. Wir fügen auch hier eine Smooth-Scrolling-Option hinzu.

4. Schließlich verwenden wir den Haken useEffect() , um zwei Lebenszyklusmethoden von vorher zu ersetzen.

   Der Hook nimmt zwei Argumente entgegen, und eines ist die Funktion, die jedes Mal ausgeführt wird, wenn die Komponente bereitgestellt wird. Das zweite Argument ist ein Array von Zustandsvariablen, auf die Sie achten müssen.

   Ändert sich der Wert der Zustandsvariable messages, führt useEffect() die Funktion ebenfalls aus. Dies führt zum gleichen Ergebnis wie die Verwendung des Lebenszyklus-Hooks componentDidUpdate().