Маніпулювання DOM за допомогою посилання

Отримання посилання на вузол

Щоб отримати доступ до DOM-вузла, керованого React, спочатку імпортуйте хук useRef Hook:

import { useRef } from 'react';

Потім використовуйте його для оголошення рефа всередині вашого компонента:

const myRef = useRef(null);

Нарешті, передайте свій реф як атрибут ref до JSX-тегу, для якого ви хочете отримати вузол DOM:

<div ref={myRef}>

Хук useRef повертає об'єкт з єдиною властивістю current. Спочатку myRef.current буде null. Коли React створить DOM-вузол для цього <div>, React помістить посилання на цей вузол в myRef.current. Після цього ви можете отримати доступ до цього DOM-вузла з ваших обробників подій і використовувати вбудовані браузерні API, визначені на ньому.

// You can use any browser APIs, for example:
myRef.current.scrollIntoView();

Example: Фокусування текстового введення

У цьому прикладі натискання кнопки сфокусує введення:

Щоб реалізувати це:

1. Оголосити inputRef за допомогою useRef хука.
2. Передайте його як <input ref={inputRef}>. Це скаже React'у помістити DOM-вузол цього <input> у inputRef.current.
3. У функції handleClick прочитайте вхідний вузол DOM з inputRef.current і викличте на ньому focus() з inputRef.current.focus().
4. Передати обробник події handleClick до <button> з onClick.

Хоча маніпуляції з DOM є найбільш поширеним випадком використання рефів, хук useRef можна використовувати для зберігання інших речей поза React, наприклад, ідентифікаторів таймерів. Подібно до стану, рефи залишаються між рендерингами. Рефи подібні до змінних стану, які не викликають повторних рендерингів, коли ви їх встановлюєте. Читайте про рефи у статті Посилання на значення за допомогою рефів.

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

У компоненті може бути більше одного рефа. У цьому прикладі є карусель з трьох зображень. Кожна кнопка центрує зображення шляхом виклику методу браузера scrollIntoView() на відповідному DOM-вузлі:

<ul>
  {items.map((item) => {
    // Doesn't work!
    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) {
      // Initialize the Map on first usage.
      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
  });
}

div {
  width: 100%;
  overflow: hidden;
}

nav {
  text-align: center;
}

button {
  margin: .25rem;
}

ul,
li {
  list-style: none;
  white-space: nowrap;
}

li {
  display: inline;
  padding: 0.5rem;
}

<li
  key={cat.id}
  ref={node => {
    const map = getMap();
    if (node) {
      // Add to the Map
      map.set(cat.id, node);
    } else {
      // Remove from the Map
      map.delete(cat.id);
    }
  }}
>

Доступ до вузлів DOM іншого компонента

Коли ви ставите реф на вбудований компонент, який виводить елемент браузера на кшталт <input />, React встановить властивість current цього рефа у відповідний вузол DOM (наприклад, фактичний <input /> в браузері).

Втім, якщо ви спробуєте поставити посилання на власний компонент, наприклад <MyInput />, за замовчуванням ви отримаєте null. Ось приклад, що демонструє це. Зверніть увагу, що натискання кнопки не фокусує ввід:

Щоб допомогти вам помітити проблему, React також виводить помилку в консоль:

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

Натомість, компоненти, які хочуть показувати свої вузли DOM, мають погодитися на таку поведінку. Компонент може вказати, що він "пересилає" своє посилання одному зі своїх нащадків. Ось як MyInput може використовувати forwardRef API:

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

Ось як це працює:

1. <MyInput ref={inputRef} /> каже React'у помістити відповідний DOM-вузол у inputRef.current. Однак, компонент MyInput сам вирішує, чи робити це. За замовчуванням він цього не робить.
2. Компонент MyInput оголошено за допомогою forwardRef. Це дозволяє йому отримати inputRef зверху як другий ref аргумент, який оголошено після пропсів.
3. MyInput сам передає отриманий реф до <input> всередині нього.

Тепер натискання кнопки для фокусування введення працює:

У системах проектування низькорівневі компоненти, такі як кнопки, входи тощо, зазвичай пересилають свої посилання на вузли DOM. З іншого боку, високорівневі компоненти, такі як форми, списки або розділи сторінок, зазвичай не показують свої DOM-вузли, щоб уникнути випадкових залежностей від структури DOM.

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

const MyInput = forwardRef((props, ref) => {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    // Only expose focus and nothing else
    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.

Загалом, ви не хочете отримувати доступ до рефів під час рендерингу. Це стосується і рефів, що містять вузли 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.

Щоб проілюструвати цю проблему, цей приклад містить привітальне повідомлення і дві кнопки. Перша кнопка вмикає свою присутність за допомогою умовного рендерингу та стану, як ви зазвичай робите в React. Друга кнопка використовує remove() DOM API, щоб примусово видалити її з DOM поза контролем React.

Спробуйте натиснути "Toggle with setState" кілька разів. Повідомлення повинно зникнути і з'явитися знову. Потім натисніть "Remove from the DOM". Це призведе до примусового видалення. Нарешті, натисніть "Toggle with setState":

Після того, як ви вручну вилучили елемент DOM, спроба використати setState для його повторного показу призведе до аварійного завершення. Це станеться тому, що ви змінили DOM, і React не знає, як продовжити коректно керувати ним.

Уникайте зміни DOM-вузлів, керованих React. Модифікація, додавання дочірніх елементів або видалення дочірніх елементів, керованих React, може призвести до непослідовних візуальних результатів або збоїв, як описано вище.

Втім, це не означає, що ви не можете зробити це взагалі. Це вимагає обережності. Ви можете безпечно змінювати частини DOM, які React не має причин оновлювати. Наприклад, якщо деякий <div> завжди порожній в JSX, React не матиме причин торкатися його списку дочірніх елементів. Тому ви можете безпечно додавати або видаляти елементи вручну.