forwardRef

Пересилання рефа через декілька компонентів

Замість того, щоб перенаправляти ref на вузол DOM, ви можете перенаправити його на власний компонент як MyInput:

const FormField = forwardRef(function FormField(props, ref) {
  // ...
  return (
    <>
      <MyInput ref={ref} />
      ...
    </>
  );
});

Якщо компонент MyInput пересилає посилання на свій <input>, то посилання на FormField дасть вам таке <input>:

function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <FormField label="Enter your name:" ref={ref} isRequired={true} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}

Компонент Form визначає реф і передає його до FormField. Компонент FormField пересилає це посилання до MyInput, який пересилає його до DOM-вузла браузера <input>. Ось як Form отримує доступ до цього DOM-вузла.

Виставляння імперативного дескриптора замість вузла DOM

Замість того, щоб показувати весь вузол DOM, ви можете показати користувацький об'єкт, який називається імперативний дескриптор, з більш обмеженим набором методів. Для цього вам потрібно визначити окреме посилання для вузла DOM:

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  // ...

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

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

import { forwardRef, useRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus();
      },
      scrollIntoView() {
        inputRef.current.scrollIntoView();
      },
    };
  }, []);

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

Якщо якийсь компонент отримує посилання на MyInput, він отримає лише ваш об'єкт { focus, scrollIntoView } замість вузла DOM. Це дозволяє вам обмежити інформацію, яку ви розкриваєте про DOM-вузол, до мінімуму.

Довідка про використання імперативних ручок.

Налагодження

Мій компонент обгорнутий в forwardRef, але посилання на нього завжди null

Зазвичай це означає, що ви забули використати отримане вами посилання.

Наприклад, цей компонент нічого не робить зі своїм посиланням:

const MyInput = forwardRef(function MyInput({ label }, ref) {
  return (
    <label>
      {label}
      <input />
    </label>
  );
});

Щоб виправити це, передайте посилання вниз до вузла DOM або іншого компонента, який може приймати посилання:

const MyInput = forwardRef(function MyInput({ label }, ref) {
  return (
    <label>
      {label}
      <input ref={ref} />
    </label>
  );
});

Посилання ref на MyInput також може бути null, якщо частина логіки є умовною:

const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
  return (
    <label>
      {label}
      {showInput && <input ref={ref} />}
    </label>
  );
});

Якщо showInput є false, то посилання не буде передано до жодного вузла, а посилання на MyInput залишиться порожнім. Це особливо легко не помітити, якщо умова прихована всередині іншого компонента, як Panel у цьому прикладі:

const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
  return (
    <label>
      {label}
      <Panel isExpanded={showInput}>
        <input ref={ref} />
      </Panel>
    </label>
  );
});