Wie scrolle ich in React zum Ende eines Chat-Widgets?

So scrollen Sie zu einem Element in React

In diesem Artikel gehen wir auf ein häufiges Problem ein, bei dem die Bildlaufleiste eines Chat-Widgets bei neuen Nachrichten oben fixiert bleibt laden. Unser Ziel ist es, die Bildlaufleiste auf das letzte Nachrichtenelement aus dem vorherigen Array zu fokussieren.

Lösung

Um dieses Problem zu lösen, müssen wir:

1. Dynamik erstellen refs, indem Sie einen Index an die Komponente übergeben, die die Nachrichtenelemente rendert.
2. Verwenden Sie eine entsprechende Bildlauffunktion, die zum gewünschten Bildlauf führt Element.

React 16.8 , Funktionskomponente:

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

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

  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(); // Scroll to the element
}

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(); // Scroll to the element
}

Wichtige Hinweise:

• Vermeiden Sie die Verwendung von String-Referenzen, da diese die Leistung und Zusammensetzbarkeit beeinträchtigen.
• Für Um eine flüssigere Scroll-Animation zu erhalten, fügen Sie Folgendes hinzu CSS:

html {
  scroll-behavior: smooth;
}

• Wenn Sie eine Referenz an eine untergeordnete Komponente übergeben, benennen Sie die Requisite anders, um Konflikte mit der nativen „Ref“-Requisite zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie scrolle ich in React zum Ende eines Chat-Widgets?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!