Reagieren Holen Sie sich die Breite eines Elements

In diesem Artikel lernen wir, wie man die Breite eines Elements in React erhält. Es ist oft erforderlich, die Breite des Elements zu erhalten, um eine Operation entsprechend der Breite oder anderen Abmessungen auszuführen. Hier verwenden wir also den React-Hook useRef(), um die Abmessungen eines bestimmten Elements zu erhalten.

Verwenden Sie den Reaktionshaken useRef(), um die Breite eines Elements zu erhalten

Lassen Sie uns versuchen, die Funktionsweise von useRef() in React von Grund auf zu verstehen.

Überlegen Sie zunächst, ob Sie die Breite eines Elements in Vanilla JavaScript benötigen. Wie geht’s? Die Antwort ist, dass Sie zuerst auf das DOM-Element zugreifen und die Eigenschaft Breite dieses DOM-Elements abrufen.

Hier verwenden wir useRef(), um eine Referenz auf das React-DOM-Element zu erstellen. Benutzer können den Haken useRef() verwenden, um die Referenz eines beliebigen DOM-Elements wie dem folgenden zu erhalten.

const ref = useRef(Initial DOM element);
return (
    <div ref={ref} >
    </div>
);

Der useRef()-Hook enthält eine current-Eigenschaft, und wir können auf das referenzierte Element zugreifen, indem wir sie verwenden. Nachdem wir das Referenzelement erhalten haben, können wir offsetWidth verwenden, um die Breite eines bestimmten referenzierten Elements zu erhalten.

let width = ref.current.offsetWidth;

Im folgenden Beispiel haben wir das HTML-Element <div> erstellt und es mit der Variablen ref referenziert. Zunächst setzen wir die Höhe und Breite des Div auf 200 Pixel.

Außerdem haben wir die Schaltfläche Div-Größe ändern hinzugefügt, und wenn der Benutzer darauf klickt, wird eine changeDivSize()-Funktion ausgeführt.

Die Funktion changeDivSize() generiert einen Zufallswert zwischen 100 und 300 und ändert die div-Elementgrösse entsprechend. Danach haben wir ref.current.offsetWidth verwendet, um die neue Breite des div-Elements zu erhalten.

Hier haben wir die Funktion setTimeout() verwendet, um eine gewisse Verzögerung hinzuzufügen, um die neue Breite des div-Elements zu erhalten.

Beispielcode:

import { useState, useRef } from "react";
function App() {
  //  creating the variables for the div width and height
  let [divWidth, setDivWidth] = useState("200px");
  let [divheight, setDivheight] = useState("200px");
  // variable to store the element's width from `ref`.
  let [widthByRef, setWidthByRef] = useState(200);
  // It is used to get the reference of any component or element
  const ref = useRef(null);
  // whenever user clicks on Change Div size button, ChangeDivSize() function will be called.
  function changeDivSize() {
    // get a random number between 100 and 300;
    let random = 100 + Math.random() * (300 - 100);
    //  convert the random number to a string with pixels
    random = random + "px";
    // change the height and width of the div element.
    setDivWidth(random);
    setDivheight(random);
    // get the width of the div element using ref.
    // reason to add the setTimeout() function is that we want to get the width of the Div once it is updated in the DOM;
    // Otherwise, it returns the old width.
    setTimeout(() => {
      setWidthByRef(ref.current ? ref.current.offsetWidth : 0);
    }, 100);
  }
  return (
    <div>
      {/* showing width which we got using ref */}
      <h3>Width of Element is : {widthByRef}</h3>
      {/* resizable div element */}
      <div
        ref={ref}
        style={{ backgroundColor: "red", height: divheight, width: divWidth }}
      >
        Click on the below buttons to resize the div.
      </div>
      {/* button to resize the div element */}
      <button style={{ marginTop: "20px" }} onClick={changeDivSize}>
        Change Div Size
      </button>
    </div>
  );
}
export default App;

Ausgang:

In der obigen Ausgabe können Benutzer sehen, dass beim Klicken auf die Schaltfläche die Größe des div geändert und die neue Breite auf der Webseite angezeigt wird.