Wie scrolle ich zu einem Element in React?

Wie scrolle ich zu einem Element?

Sie möchten, dass sich Ihr Chat-Widget automatisch auf die letzte Nachricht konzentriert, wenn neue Nachrichten geladen werden. Um dies zu erreichen, müssen Sie für jede Nachricht eine dynamische Referenz erstellen und mit einer Scroll-Funktion zum letzten Element scrollen.

So können Sie es machen:

React 16.8, Funktionskomponente

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

  const executeScroll = () => myRef.current.scrollIntoView(); // run this function from an event handler or an effect to execute scroll

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

React 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.
}

Hinweise:

• Vermeiden Sie die Verwendung von String-Referenzen, da diese veraltet sind.
• Übergeben Sie ref an das DOM-Element, nicht an die React-Komponente.
• Fügen Sie CSS hinzu, um eine reibungslose Scroll-Animation zu ermöglichen.

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