Greifen Sie in React auf ein DOM-Element zu

1. Alternative zu getElementById() in React
2. Refs in React Functional Components
3. Refs in React Class Components

React ist ein JavaScript-basiertes Framework, aber es arbeitet mit einem virtuellen DOM. Die React-API umfasst andere Methoden und Eigenschaften als natives JavaScript.

Beim Erstellen von Webanwendungen verwenden Entwickler häufig die Methode Document.getElementById(). Diese Methode kann die ID angeben und mit bestimmten HTML-Elementen arbeiten.

Alternative zu getElementById() in React

React hat seine eigenen Regeln und Systemebenen, die auf der nativen JavaScript-Schnittstelle aufbauen. Um auf bestimmte DOM-Knoten in React zuzugreifen, müssen wir statt der Methode Document.getElementById() refs verwenden.

Refs können für viele verschiedene Zwecke verwendet werden, z. B. zum Abrufen des in Eingabeelemente eingegebenen Werts, zum Steuern des Erscheinungsbilds von Elementen, wenn sie fokussiert sind, zum Abspielen von Animationen und mehr.

Dennoch folgt React standardmäßig einem deklarativen Ansatz zum Erstellen der Benutzeroberfläche der Anwendung. Refs sind eine Ausnahme von diesem Ansatz und sollten daher nur in Ausnahmefällen verwendet werden.

Refs in React Functional Components

Seit der Einführung von Hooks in React v16.8 können Entwickler refs in funktionalen Komponenten erstellen. Der useRef-Hook kann aus der zentralen React-Bibliothek importiert werden.

Schauen wir uns dieses Beispiel an.

import "./styles.css";
import { useRef } from "react";
export default function App() {
  const header = useRef(null);
  console.log(header);

  return (
    <div className="App">
      <h1 ref={header}>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Wir initialisieren die header-Variable zu einer ref mit einem null-Wert.

In JSX setzen wir das Attribut ref des Elements <h1> auf diese Variable. Dann console.log() die Variable, und wenn Sie die Konsole auf dieser Live-Demo überprüfen, enthält die Variable den Wert, der den DOM-Knoten <h1> darstellt.

Refs in React Class Components

React-Entwickler können auch die Class-Syntax verwenden, um Komponenten zu erstellen. In diesem Beispiel haben wir eine Komponente, die dasselbe tut wie die funktionale Komponente im vorherigen Beispiel.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.header = React.createRef();
  }
  render() {
      return <h1 ref={this.header}>Hello CodeSandbox</h1>;
  }
}

Der Hauptunterschied ist die Syntax. Wir verwenden die Methode React.createRef(), um die ref einzurichten.