Wie scrolle ich automatisch zu einem bestimmten Element in React?

Wie scrolle ich automatisch zu einem bestimmten Element?

Problem:

In einem Chat-Widget sollten neue Nachrichten automatisch angezeigt werden Scrollen Sie in die Ansicht, während der Benutzer nach oben scrollt. Allerdings bleibt der Schieberegler oben fixiert, wenn neue Nachrichten geladen werden, was es schwierig macht, die neuesten Nachrichten zu sehen.

Lösung:

Um zu einem bestimmten Element zu scrollen, wenn Wenn neue Nachrichten hinzugefügt werden, befolgen Sie diese Schritte:

Reagieren 16.8, Funktionskomponente

const ScrollDemo = () => {
  const myRef = useRef(null);
  const executeScroll = () => myRef.current.scrollIntoView(); // Run this function to execute scroll
  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll</button>
    </>
  );
};

Reagieren 16.3, Klassenkomponente

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(); // Run this method to execute scrolling
}

Klassenkomponente – Ref-Rückruf

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

  executeScroll = () => this.myRef.scrollIntoView(); // Run this method to execute scrolling
}

String-Referenzen vermeiden:

String-Referenzen werden aus Leistungsgründen nicht empfohlen Probleme, mangelnde Zusammensetzbarkeit und mögliche Entfernung in zukünftigen React Veröffentlichungen.

Optional: Reibungslose Scroll-Animation:

Für ein reibungsloses Scroll-Erlebnis fügen Sie dem HTML-Element das folgende CSS hinzu:

html {
  scroll-behavior: smooth;
}

Referenz an ein untergeordnetes Element übergeben:

Um eine Referenz an ein bestimmtes DOM-Element innerhalb eines untergeordneten Elements anzuhängen Komponente:

const MyComponent = () => {
  const myRef = useRef(null);
  return <ChildComp refProp={myRef} />;
};

Innerhalb der ChildComp-Komponente:

const ChildComp = (props) => {
  return <div ref={props.refProp} />;
};

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