Автоматичне визначення висоти умовно відображеного компонента в React

8 Березня 2024 в 20:12 67

У багатьох випадках у розробці веб-додатків за допомогою React може виникнути потреба в динамічному визначенні висоти компонента, який відображається умовно. Ця проблема стає особливо актуальною, коли потрібно налаштувати стилі або виконати інші операції залежно від розміру вмісту компонента. У цій статті ми розглянемо підхід до автоматичного визначення висоти умовно відображеного компонента в React за допомогою використання ref та useEffect.

Проблема

Зазвичай умовний рендеринг в React використовується для відображення компонентів лише у випадку виконання певних умов. У багатьох випадках висота таких компонентів може бути невідома наперед, а також може змінюватися в залежності від їх вмісту. Наприклад, може виникнути ситуація, коли потрібно визначити висоту модального вікна, яке з’являється лише після натискання на кнопку або виконання певних дій користувачем.

У зазначеному випадку, коли потрібно автоматично визначити висоту компонента, щоб налаштувати його стилі або виконати певні операції на основі цієї висоти, виникає питання, як це зробити ефективно та надійно.

Рішення

Один з підходів до вирішення цієї проблеми – використання ref та useEffect. Ref – це спеціальний хук у React, який дозволяє отримати посилання на DOM-елемент або React-компонент. Ми можемо використати ref, щоб отримати доступ до відображеного компонента та отримати його розміри. Після цього можемо використати useEffect для виклику певних дій на основі цих розмірів.

Ось детальний опис рішення:

Створіть ref за допомогою хука useRef().
Використовуйте useEffect для визначення розмірів компонента за допомогою ref.current.clientWidth та ref.current.clientHeight.
Оновлюйте стан з отриманими розмірами компонента.
Використовуйте отримані дані для виконання потрібних операцій, таких як налаштування стилів.

Приклад

Для демонстрації цього підходу, розглянемо наступний код у React:

import React, { useEffect, useState } from "react";
const App = () => {
  const [isClicked, setClick] = useState(false);
  const [dimension, setDimension] = React.useState({ width: 0, height: 0 });
  const ref = React.useRef(null);
  useEffect(() => {
    if (ref.current) {
      setDimension({
        width: ref.current.clientWidth,
        height: ref.current.clientHeight,
      });
    }
  }, [ref.current]);
  return (
    <div>
      <button onClick={() => setClick(!isClicked)}>Click me</button>
      {isClicked && (
        <div className="App">
          <div ref={ref} style={{ marginTop: dimension.height }}>
            
            <h5>World</h5>
            <h5>!</h5>
          </div>
        </div>
      )}
    </div>
  );
};
export default App;

import React, { useEffect, useState } from "react";

const App = () => {

const [isClicked, setClick] = useState(false);

const [dimension, setDimension] = React.useState({ width: 0, height: 0 });

const ref = React.useRef(null);

useEffect(() => {

if (ref.current) {

setDimension({

width: ref.current.clientWidth,

height: ref.current.clientHeight,

});

}

}, [ref.current]);

return (

<div>

<button onClick={() => setClick(!isClicked)}>Click me</button>

{isClicked && (

<h5>World</h5>

</div>

)}

</div>

);

};

export default App;

У цьому прикладі, при кліку на кнопку “Click me” відображається блок з текстом “Hello World!”. Висота цього блоку автоматично визначається за допомогою ref, і використовується для встановлення відступу зверху.

Висновок

Автоматичне визначення висоти умовно відображеного компонента в React є важливою задачею при розробці веб-додатків. Використання ref та useEffect дозволяє ефективно вирішувати цю проблему, дозволяючи динамічно отримувати розміри компонента та виконувати потрібні дії на їх основі. Цей підхід дозволяє створювати більш гнучкі та адаптивні інтерфейси, які легко налаштовуються під будь-які умови.