Wie scrolle ich zu einem Element in React?

Scrollen zu einem Element in React

In React können Entwickler auf Situationen stoßen, in denen sie dynamisch zu einem bestimmten Element scrollen möchten, z. B. in einem Chat-Widget, wo neu geladene Nachrichten sollten in den Fokus gerückt werden. Um dies zu erreichen, können mehrere Techniken eingesetzt werden:

React 16.8, Funktionskomponente

Mit dem useRef-Hook können Sie eine dynamische Referenz auf das Element erstellen, zu dem Sie scrollen möchten:

const myRef = useRef(null);

const executeScroll = () => myRef.current.scrollIntoView();

Sobald die Referenz hergestellt ist, können Sie die FunktionexecuteScroll() von einem Event-Handler oder innerhalb eines Effekts aufrufen, um den Bildlauf durchzuführen.

React 16.3, Klassenkomponente

Für Klassenkomponenten haben Sie zwei Möglichkeiten:

Option 1: Verwenden von createRef

constructor(props) {
  super(props)
  this.myRef = React.createRef()  
}

Option 2: Ref Callback

render() {
  return <div ref={ (ref) => this.myRef=ref }></div>
}

In beiden Fällen können Sie this.myRef.scrollIntoView() verwenden, um zum Element zu scrollen.

Vorbehalte

• Vermeiden Sie die Verwendung von String-Refs, da diese veraltet sind und kann die Leistung beeinträchtigen.
• Ermöglichen Sie reibungsloses Scrollen, indem Sie dem Dokument das folgende CSS hinzufügen:

html {
  scroll-behavior: smooth;
}

Referenz an untergeordnete Komponente übergeben

Wenn das gewünschte Element Wenn sich der Bildlauf in einer untergeordneten Komponente befindet, können Sie die folgende Technik verwenden:

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

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

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!