如何确定 ReactJS 中组件的大小？

组件的大小由容器的高度和宽度决定。可以确定我们是否为该组件分配了一个 ref。带有ref属性的useRef函数用于获取组件的当前大小。

带有 ref 属性的 useRef 钩子在这里工作以创建对我们要确定其大小的组件的引用。

• useRef： useRef 是一个钩子，允许直接在功能组件中创建对 DOM 元素的引用。
• Refs： Refs 是 React 提供的一个函数，用于访问您可能自己创建的 DOM 元素和 React 元素。

useRef 返回一个 ref 对象。该对象有一个名为.current的属性。该值保留在refContainer.current属性中。然后在refContainer.current的帮助下，我们将能够获得该组件的高度和宽度。

要获取组件的高度和宽度，我们使用：

• 宽度： refContainer.current.offsetWidth
• 高度： refContainer.current.offsetHeight

创建反应应用程序

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

第 3 步：在 react 项目目录的 src 文件夹中创建文件夹 components 并在 components 文件夹中创建文件 List.jsx

项目结构：它看起来像这样。

示例：如何确定组件大小的基本示例。在 index.js、App.js 和 List.jsx 文件中写下以下代码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
  
    
  ,
  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();

文件名：App.js

Javascript

import React from "react";
import List from "./components/List";
  
function App() {
  return (
    

      
Size of Component
      
    
  );
}
  
export default App;

列表.jsx

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 (
    

      
        Container:
        

        width: {dimensions.width}
        

        height: {dimensions.height}
      
    
  );
}
  
export default List;

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：

组件尺寸

在 ref 对象的帮助下，我们能够确定容器的宽度和高度，这实际上是组件的大小。