Манипулирование DOM с помощью ссылок

Получение ссылки на узел

Чтобы получить доступ к узлу DOM, управляемому React, сначала импортируйте user Крюк:

import { useRef } from 'react';

Затем используйте его для объявления ссылки внутри вашего компонента:

const myRef = useRef(null);

Наконец, передайте свой ref в качестве атрибута ref тегу JSX, для которого вы хотите получить узел DOM:

<div ref={myRef}>

Крюк use Reef возвращает объект с единственным свойством под названием current. Изначально myRef.current будет иметь значение null. Когда React создаст узел DOM для этого <div>, React поместит ссылку на этот узел в myRef.current. Затем вы можете получить доступ к этому узлу DOM из ваших обработчиков событий и использовать встроенные API браузера определено на нем.

// Вы можете использовать любые API-интерфейсы браузера, например:
myRef.current.scrollIntoView();

Пример: Фокусировка ввода текста

В этом примере нажатие кнопки сфокусирует вводимые данные:

Чтобы реализовать это:

1. Объявите input Ref с помощью крючка use Reef.
2. Передайте его как <input ref={входная ссылка}>. Это указывает React на поместить этот DOM-узел <input> в input Ref.current.
3. В функции handleClick считайте входной DOM-узел из inputRef.current и вызывайте focus() на нем с помощью inputRef.current.focus().
4. Передайте обработчик события “обработать щелчок” в <кнопка> с помощью onClick.

В то время как манипулирование DOM является наиболее распространенным вариантом использования ссылок, крючки use Reef могут использоваться для хранения других вещей вне React, таких как идентификаторы таймера. Аналогично состоянию, ссылки остаются между рендерами. Ссылки подобны переменным состояния, которые не запускают повторный рендеринг, когда вы их устанавливаете. Читайте о ссылках в Ссылка на значения с помощью ссылок.

Пример: Прокрутка к элементу

У вас может быть более одного ref в компоненте. В этом примере есть карусель из трех изображений. Каждая кнопка центрирует изображение, вызывая браузер scrollIntoView() метод на соответствующем узле DOM:

<ul>
  {items.map((item) => {
    // Не работает!
    const ref = useRef(null);
    return <li ref={ref} />;
  })}
</ul>

import { useRef } from 'react';

export default function CatFriends() {
  const itemsRef = useRef(null);

  function scrollToId(itemId) {
    const map = getMap();
    const node = map.get(itemId);
    node.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center'
    });
  }

  function getMap() {
    if (!itemsRef.current) {
      // Инициализируйте Map при первом использовании.
      itemsRef.current = new Map();
    }
    return itemsRef.current;
  }

  return (
    <>
      <nav>
        <button onClick={() => scrollToId(0)}>
          Tom
        </button>
        <button onClick={() => scrollToId(5)}>
          Maru
        </button>
        <button onClick={() => scrollToId(9)}>
          Jellylorum
        </button>
      </nav>
      <div>
        <ul>
          {catList.map(cat => (
            <li
              key={cat.id}
              ref={(node) => {
                const map = getMap();
                if (node) {
                  map.set(cat.id, node);
                } else {
                  map.delete(cat.id);
                }
              }}
            >
              <img
                src={cat.imageUrl}
                alt={'Cat #' + cat.id}
              />
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

const catList = [];
for (let i = 0; i < 10; i++) {
  catList.push({
    id: i,
    imageUrl: 'https://placekitten.com/250/200?image=' + i
  });
}

<li
  key={cat.id}
  ref={node => {
    const map = getMap();
    if (node) {
      // Добавить в Map
      map.set(cat.id, node);
    } else {
      // Убрать из Map
      map.delete(cat.id);
    }
  }}
>

Доступ к DOM-узлам другого компонента

Когда вы помещаете ссылку на встроенный компонент, который выводит элемент браузера, такой как <input />, React установит свойство current этого ref для соответствующего узла DOM (например, фактического <input /> в браузере).

Однако, если вы попытаетесь поместить reef на ** свой собственный ** компонент, например <My Input />, по умолчанию вы получите null. Вот пример, демонстрирующий это. Обратите внимание, что нажатие кнопки ** не приводит к ** фокусировке ввода:

Чтобы помочь вам заметить проблему, React также выводит сообщение об ошибке на консоль:

Это происходит потому, что по умолчанию React не позволяет компоненту получать доступ к DOM-узлам других компонентов. Даже для своих собственных детей! Это сделано намеренно. Рефери - это аварийный люк, которым следует пользоваться с осторожностью. Ручное манипулирование DOM-узлами другого компонента делает ваш код еще более хрупким.

Вместо этого компоненты, которые want предоставляют доступ к своим DOM-узлам, должны ** согласиться ** на такое поведение. Компонент может указать, что он “пересылает” свой ref одному из своих дочерних элементов. Вот как “My Input” может использовать API “forward Ref”:

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

Вот как это работает:

1. <My Input ref={input Ref} /> сообщает React поместить соответствующий узел DOM в input Ref.current. Однако выбор в пользу этого зависит от компонента “Мои входные данные” - по умолчанию это не так.
2. Компонент My Input объявлен с использованием forward Ref. *Это позволяет ему получать input Ref сверху в качестве второго аргумента ref, который объявляется после props.
3. Сам myInput передает полученный им ref в <input> внутри него.

Теперь нажатие кнопки для фокусировки ввода работает:

В системах проектирования это обычная схема для низкоуровневых компонентов, таких как кнопки, входные данные и так далее, пересылать свои ссылки на свои DOM-узлы. С другой стороны, компоненты высокого уровня, такие как формы, списки или разделы страниц, обычно не раскрывают свои узлы DOM, чтобы избежать случайных зависимостей от структуры DOM.

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

const MyInput = forwardRef((props, ref) => {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    // Только выставляйте фокус и ничего больше
    focus() {
      realInputRef.current.focus();
    },
  }));
  return <input {...props} ref={realInputRef} />;
});

export default function Form() {
  const inputRef = useRef(null);

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

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

Когда React присоединяет ссылки

В React каждое обновление разделено на два этапа:

• Во время рендеринга React вызывает ваши компоненты, чтобы выяснить, что должно быть на экране.
• Во время фиксации React применяет изменения к DOM.

В общем, вы [не хотите] (/learn/referencing-values-with-refs#best-practices-for-refs) получать доступ к ссылкам во время рендеринга. Это также относится к ссылкам, содержащим узлы DOM. Во время первого рендеринга узлы DOM еще не были созданы, поэтому ref.current будет null. И во время рендеринга обновлений узлы DOM еще не были обновлены. Так что еще слишком рано их читать.

React устанавливает ref.current во время фиксации. Перед обновлением DOM React устанавливает для затронутых значений ref.current значение null. После обновления DOM React немедленно устанавливает их в соответствующие узлы DOM.

Обычно вы получаете доступ к ссылкам из обработчиков событий. Если вы хотите что-то сделать со ссылкой, но нет конкретного события, в котором это можно сделать, вам может понадобиться эффект. Мы обсудим эффекты на следующих страницах.

import { useState, useRef } from 'react';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    setText('');
    setTodos([ ...todos, newTodo]);
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        Add
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

setTodos([ ...todos, newTodo]);
listRef.current.lastChild.scrollIntoView();

flushSync(() => {
  setTodos([ ...todos, newTodo]);
});
listRef.current.lastChild.scrollIntoView();

import { useState, useRef } from 'react';
import { flushSync } from 'react-dom';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    flushSync(() => {
      setText('');
      setTodos([ ...todos, newTodo]);      
    });
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        Add
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

Лучшие практики для манипулирования DOM с помощью ссылок

Судьи - это спасательный люк. Вы должны использовать их только тогда, когда вам нужно “выйти за пределы React”. Распространенные примеры этого включают управление фокусом, положением прокрутки или вызов API-интерфейсов браузера, которые React не предоставляет.

Если вы будете придерживаться неразрушающих действий, таких как фокусировка и прокрутка, у вас не должно возникнуть никаких проблем. Однако, если вы попытаетесь ** изменить ** DOM вручную, вы можете столкнуться с риском возникновения конфликта с изменениями, которые вносит React.

Чтобы проиллюстрировать эту проблему, в этом примере есть приветственное сообщение и две кнопки. Первая кнопка переключает свое присутствие, используя conditional rendering и state, как вы обычно делаете в React. Вторая кнопка использует remove() DOM API, чтобы принудительно удалить его из DOM вне контроля React.

Попробуйте нажать “Переключить с помощью setState” несколько раз. Сообщение должно исчезнуть и появиться снова. Затем нажмите “Удалить из DOM”. Это приведет к его принудительному удалению. Наконец, нажмите “Переключить с помощью setState”.:

После того как вы вручную удалили элемент DOM, попытка использовать setState для его повторного отображения приведет к сбою. Это потому, что вы изменили DOM, и React не знает, как продолжать правильно управлять им.

Избегайте изменения узлов DOM, управляемых React. Изменение, добавление дочерних элементов к элементам, управляемым React, или удаление дочерних элементов из элементов, управляемых React, может привести к несогласованным визуальным результатам или сбоям, подобным описанным выше.

Однако это не значит, что вы вообще не можете этого сделать. Это требует осторожности. ** Вы можете безопасно изменять части DOM, которые у React нет причин обновлять.** Например, если какой-либо <div> всегда пуст в JSX, у React не будет причин трогать его дочерний список. Таким образом, безопасно вручную добавлять или удалять там элементы.