Wie scrolle ich effizient zu Elementen in React?

Effizientes Scrollen zu Elementen in React

In diesem Artikel befassen wir uns mit einer häufigen Herausforderung bei der Verwaltung des Scrollverhaltens in React-Anwendungen: Sicherstellen, dass der Scrollfokus auf neu geladenen Elementen bleibt Elemente. Wir stellen verschiedene Ansätze vor, um dies zu erreichen, geeignet für React 16.3 und 16.8.

React 16.8, Funktionskomponente

Mithilfe des useRef-Hooks erstellen wir eine Referenz für das gewünschte Element. Durch Aufrufen der an diese Referenz gebundenen scrollIntoView-Funktion scrollen wir reibungslos zu diesem Element.

const ScrollDemo = () => {
  const myRef = useRef(null);

  const executeScroll = () => myRef.current.scrollIntoView(); // scroll to element

  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll</button>
    </>
  );
};

React 16.3, Klassenkomponente

Für Klassenkomponenten können wir mit React.createRef eine Referenz erstellen (). Die Methode „executeScroll“ ruft die scrollIntoView-Funktion für die Referenz auf, um reibungslos zum gewünschten Element zu scrollen.

class ReadyToScroll extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.current.scrollIntoView(); // scroll to element
}

Ref-Rückruf

Alternativ können wir einen Ref-Rückruf verwenden, um die Referenz an ein Element anzuhängen . Diese Methode stellt sicher, dass die Referenz direkt dem DOM-Element zugewiesen wird, ohne dass eine Instanzvariable erstellt wird.

class ReadyToScroll extends Component {
  render() {
    return <div ref={ref => (this.myRef = ref)}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.scrollIntoView(); // scroll to element
}

Überlegungen

• String-Referenzen vermeiden:String-Referenzen haben Auswirkungen auf die Leistung und werden von React entmutigt.
• Smooth Scroll Animation: Reibungsloses Scrollen kann durch Hinzufügen von scroll-behavior: Smooth zum CSS des HTML-Elements aktiviert werden.
• Übergabe einer Referenz an ein untergeordnetes Element: Wenn eine Referenz an eine untergeordnete Komponente übergeben wird, Weisen Sie es einer Requisite mit einem anderen Namen als „ref“ zu, um Konflikte zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie scrolle ich effizient zu Elementen in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!