Використання Ref як пропса в React.js 19

React.js 19 спрощує і робить більш універсальним управління посиланнями (refs) як пропсами. Це дозволяє батьківському компоненту передавати посилання на дочірній компонент, що забезпечує прямий доступ до DOM-елементів або методів дочірнього компонента. Це спрощує розробку та зменшує кількість шаблонного коду для керування посиланнями в ієрархії компонентів.

Що таке Ref?

У React, ref — це спеціальний атрибут, який використовується для посилання на екземпляр класового компонента або DOM-елементу. Refs часто використовуються для:

• Керування фокусом або вибором.
• Запуску анімацій.
• Доступу до методів дочірніх компонентів.

Чому використовувати Ref як пропс?

Передаючи посилання як пропс, батьківський компонент може:

• Взаємодіяти з DOM-елементом дочірнього компонента.
• Викликати методи або отримувати доступ до стану дочірніх компонентів.
• Поділитися одним посиланням між кількома компонентами.

React.js 19 спрощує цей процес за допомогою React.forwardRef.

Як використовувати Ref як пропс

Оскільки React розглядає ref як зарезервоване ключове слово, неможливо передавати Refs як звичайний пропс.
Замість цього, ref передається дочірньому компоненту через React.forwardRef.

Приклади використання Ref як пропса

Приклад 1: Передача Ref до DOM-елемента

Дочірній компонент:

import React from "react";  

const InputField = React.forwardRef((props, ref) => {  
  return <input ref={ref} />;
});  

export default InputField;

Батьківський компонент:

import React, { useRef } from "react";  
import InputField from "./InputField";  

function ParentComponent() {  
  const inputRef = useRef();  
  const handleFocus = () => {  
    inputRef.current.focus();  
  };  

  return (  
    <div>  
      <h2>Ref як пропс: приклад</h2>  
      <InputField ref={inputRef} />  
      <button onClick={handleFocus}>Зосередити на полі вводу</button>  
    </div>  
  );  
}  

export default ParentComponent;

Пояснення: Компонент InputField використовує React.forwardRef для передачі ref до DOM-елемента. Компонент ParentComponent зосереджує увагу на полі вводу, викликаючи inputRef.current.focus().

Приклад 2: Виклик методів у дочірньому компоненті

Дочірній компонент:

import React, { useImperativeHandle, useRef } from "react";  

const CustomInput = React.forwardRef((props, ref) => {  
  const inputRef = useRef();  
  useImperativeHandle(ref, () => ({  
    focus: () => {  
      inputRef.current.focus();  
    },  
    clear: () => {  
      inputRef.current.value = "";  
    },  
  }));  

  return <input ref={inputRef} />;  
});  

export default CustomInput;

Батьківський компонент:

import React, { useRef } from "react";  
import CustomInput from "./CustomInput";  

function ParentComponent() {  
  const customInputRef = useRef();  

  const handleFocus = () => {  
    customInputRef.current.focus();  
  };  

  const handleClear = () => {  
    customInputRef.current.clear();  
  };  

  return (  
    <div>  
      <h2>Ref з власними методами</h2>  
      <CustomInput ref={customInputRef} />  
      <button onClick={handleFocus}>Зосередити на полі вводу</button>  
      <button onClick={handleClear}>Очистити поле вводу</button>  
    </div>  
  );  
}  

export default ParentComponent;

Пояснення: Компонент CustomInput використовує useImperativeHandle для надання методів focus і clear. Компонент ParentComponent може викликати ці методи безпосередньо через customInputRef.

Приклад 3: Поділ одного Ref між компонентами

Дочірній компонент:

import React from "react";  

const Button = React.forwardRef((props, ref) => {  
  return <button ref={ref}>{props.children}</button>;  
});  

export default Button;

Батьківський компонент:

import React, { useRef } from "react";  
import Button from "./Button";  

function ParentComponent() {  
  const buttonRef = useRef();  

  const handleClick = () => {  
    buttonRef.current.textContent = "Натиснуто!";  
  };  

  return (  
    <div>  
      <h2>Поділ Ref між компонентами</h2>  
      <Button ref={buttonRef}>Натисни мене</Button>  
      <button onClick={handleClick}>Оновити текст кнопки</button>  
    </div>  
  );  
}  

export default ParentComponent;

Пояснення: Компонент Button передає ref до елемента . Компонент ParentComponent змінює текст кнопки, отримуючи доступ до buttonRef.

Переваги Ref як пропса в React.js 19

• Покращена зручність читання: Чистіший і інтуїтивно зрозуміліший код для роботи з refs.
• Краща повторюваність: Компоненти можуть надавати свої внутрішні елементи батьківським компонентам за потреби.
• Оптимізоване спілкування: Спрощує взаємодію між батьківськими і дочірніми компонентами.

Кращі практики для використання Refs

1. Використовуйте refs рідко, тільки коли це необхідно.
2. Використовуйте useImperativeHandle для надання методів компонента.
3. Уникайте використання refs для керування станом; замість цього використовуйте стани і пропси React.

Висновок

Можливість використовувати Ref як пропс в React.js 19 підвищує адаптивність і спрощує ієрархії компонентів.
Розробники можуть створювати більш динамічні та інтерактивні додатки, комбінуючи React.forwardRef та useImperativeHandle для ефективного керування доступом до DOM та надання методів дочірніх компонентів.

#newyear #AhmedQeshta #webdev #2025 #react #reactjs #react.js #web #frontend #web #dev #react19 #new #features #happynewyear #newyear #nextjs #JavaScript #Javascript #java_script

Перекладено з: Using Ref as a Prop in React.js 19