¿Cómo determinar el tamaño de un componente en ReactJS?

El tamaño de un componente está determinado por la altura y el ancho del contenedor. Se puede determinar si asignamos una referencia a ese componente. La función useRef con el atributo ref se utiliza para obtener el tamaño actual del componente. 

El gancho useRef con el atributo ref está trabajando aquí para crear una referencia al componente cuyo tamaño queremos determinar.

• useRef: El useRef es un gancho que permite crear directamente una referencia al elemento DOM en el componente funcional.
• Referencias: las referencias son una función proporcionada por React para acceder al elemento DOM y al elemento React que podría haber creado por su cuenta.

useRef devuelve un objeto ref. Este objeto tiene una propiedad llamada .current . El valor se mantiene en la propiedad refContainer.current . Luego, con la ayuda de refContainer.current , podremos obtener la altura y el ancho de ese componente. 

Para obtener la altura y el ancho del componente usamos:

• ancho: refContainer.current.offsetWidth
• altura: refContainer.current.offsetHeight

Creación de la aplicación React

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app example

Paso 2: después de crear la carpeta de su proyecto, es decir, ejemplo, muévase a ella con el siguiente comando:

cd example

Paso 3: cree componentes de carpeta dentro de la carpeta src del directorio del proyecto de reacción y dentro de la carpeta de componentes cree archivos List.jsx

Estructura del proyecto: Se verá así.

Ejemplo: Ejemplo básico de cómo determinar el tamaño de un componente. Escriba el siguiente código en el archivo index.js, App.js y List.jsx. 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  
// If you want to start measuring performance
// in your app, pass a function to log results
// (for example: reportWebVitals(console.log))
reportWebVitals();

Nombre de archivo: App.js

import React from "react";
import List from "./components/List";
  
function App() {
  return (
    <div className="App">
      <h1>Size of Component</h1>
      <List />
    </div>
  );
}
  
export default App;

import React, { useState, useEffect, useRef } from 'react';
  
function List() {
  const refContainer = useRef();
  const [dimensions, setDimensions] = 
    useState({ width: 0, height: 0 });
  useEffect(() => {
    if (refContainer.current) {
      setDimensions({
        width: refContainer.current.offsetWidth,
        height: refContainer.current.offsetHeight,
      });
    }
  }, []);
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        height: '100%',
        backgroundColor: '#fafafa',
        margin: '20px',
      }}
      ref={refContainer}>
      <pre>
        Container:
        <br />
        width: {dimensions.width}
        <br />
        height: {dimensions.height}
      </pre>
    </div>
  );
}
  
export default List;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npm start

Producción: 

tamaño del componente

Con la ayuda del objeto ref, podemos determinar el ancho y la altura del contenedor, que en realidad es el tamaño del componente.