React-Refs

React unterstützt eine ganz besondere EigenschaftRef, mit der Sie an jede von render() ausgegebene Komponente binden können.

Diese besondere Eigenschaft ermöglicht es Ihnen, auf die entsprechende zugrunde liegende Instanz zu verweisen, die von render() zurückgegeben wird, sodass Sie jederzeit die richtige Instanz erhalten.

In React bieten Refs eine Möglichkeit, auf DOM-Elemente oder Komponenteninstanzen zuzugreifen. Mithilfe von Refs können Sie DOM-Elemente direkt manipulieren oder Instanzen von Kindkomponenten abrufen; geeignet für Szenarien wie Fokussteuerung, Textauswahl, Medienwiedergabe, Auslösen erzwungener Animationen oder Integration von DOM-Bibliotheken von Drittanbietern.

Nutzung

Verwenden Sie React.createRef oder useRef, um Refs zu erstellen und darauf zuzugreifen.

React.createRef wird typischerweise in Klassenkomponenten verwendet, während useRef ein Hook ist, der typischerweise in Funktionskomponenten verwendet wird.

Darüber hinaus kann das Binden von this in Event-Handler-Funktionen mithilfe der Klassen-Eigenschaftssyntax erfolgen, um zu vermeiden, dass bei jedem Rendern eine neue Funktion erstellt wird.

  • Erstellen einer Ref: Verwenden Sie sie im Konstruktor einer KlassenkomponenteReact.createRefErstellen Sie ein Ref-Objekt und weisen Sie es einer Eigenschaft der Komponenteninstanz zu.
  • Binden der Ref: In derrenderMethode, binden Sie das Ref-Objekt an das DOM-Element, auf das verwiesen werden soll.
  • Zugriff auf die Ref: In anderen Methoden der Komponente, überthis.myInputRef.currentauf das gebundene DOM-Element zugreifen und dessen Eigenschaften und Methoden manipulieren.

Vollständiges Beispiel

Sie können dies verwenden, um die aktuelle React-Komponente zu erhalten, oder ref verwenden, um eine Referenz auf die Komponente zu erhalten, wie im folgenden Beispiel gezeigt:

React-Beispiel

class MyComponent extends React.Component { constructor(props) { super(props); this.myInputRef = React.createRef(); } handleClick = () => { //Verwenden Sie die native DOM-API, um den Fokus zu erhalten this.myInputRef.current.focus(); } render() { return ( <div> <input type="text" ref={this.myInputRef} /> <input type="button" value="Klicken Sie auf mich, um das Eingabefeld zu fokussieren" onClick={this.handleClick} /> </div> ); } }

Selbst ausprobieren »

Im Beispiel haben wir eine Referenz auf die zugrunde liegende Instanz des Eingabefelds erhalten, und nach dem Klicken auf die Schaltfläche erhält das Eingabefeld den Fokus.

Wir können auch die Methode getDOMNode() verwenden, um das DOM-Element zu erhalten.

Refs erstellen

React stellt die Methode React.createRef zum Erstellen von Refs bereit.

Beispiel

import React from 'react';
import ReactDOM from 'react-dom';

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

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Rendere die MyComponent-Komponente
root.render(<MyComponent />);

Callback-Refs

Eine andere Möglichkeit, Refs zu erstellen, ist die Verwendung einer Callback-Funktion. Dieser Ansatz war vor React 16.3 üblich; jetzt wird React.createRef stärker empfohlen.

Beispiel

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.setMyRef = element => {
      this.myRef = element;
    };
  }

  componentDidMount() {
    if (this.myRef) {
      this.myRef.focus();
    }
  }

  render() {
    return <input type="text" ref={this.setMyRef} />;
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Rendere die MyComponent-Komponente
root.render(<MyComponent />);

Zugriff auf DOM-Elemente mit Refs

Mithilfe von Refs können Sie direkt auf DOM-Elemente zugreifen und sie manipulieren.

Beispiel

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

  handleClick = () => {
    this.myRef.current.style.backgroundColor = 'yellow';
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.myRef} />
        <button onClick={this.handleClick}>Hintergrund ändern</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Rendere die MyComponent-Komponente
root.render(<MyComponent />);

Zugriff auf Instanzen von Kindkomponenten mit Refs

Refs können auch verwendet werden, um auf die Instanzmethoden oder Eigenschaften von Kindkomponenten zuzugreifen.

Beispiel

class ChildComponent extends React.Component {
  focusInput = () => {
    this.inputRef.current.focus();
  };

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

  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

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

  handleClick = () => {
    this.childRef.current.focusInput();
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>Eingabe des Kindes fokussieren</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Rendere die MyComponent-Komponente
root.render(<MyComponent />);

Verwendung des useRef-Hooks (Funktionskomponenten)

In Funktionskomponenten kann der useRef-Hook verwendet werden, um Refs zu erstellen.

Beispiel

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Eingabe fokussieren</button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
// Rendere die MyComponent-Komponente
root.render(<MyComponent />);

Zusammenfassung

  • Refs erstellen: Verwendung in KlassenkomponentenReact.createRef, Verwendung in FunktionskomponentenuseRef Hook.
  • Zugriff auf DOM-Elemente: Direkter Zugriff auf DOM-Elemente und deren Manipulation über Refs.
  • Zugriff auf Instanzen untergeordneter Komponenten: Zugriff auf Methoden oder Eigenschaften der Instanz einer untergeordneten Komponente über Refs.
  • Anpassen der exponierten Instanzwerte: Verwenden SieuseImperativeHandleundforwardRef, um den Instanzwert anzupassen, den eine untergeordnete Komponente für ihre übergeordnete Komponente bereitstellt.
  • Refs im Concurrent Mode: Refs funktionieren im Concurrent Mode weiterhin normal und können kombiniert werden mituseTransitionund anderen Hooks, die mit dem Concurrent Mode zusammenhängen.
Andere Erweiterungen