createRef

createRef здебільшого використовується для компонентів класу . Функціональні компоненти зазвичай покладаються на useRef.

createRef створює об'єкт ref, який може містити довільне значення.

class MyInput extends Component {
  inputRef = createRef();
  // ...
}

Посилання

`createRef()`

Виклик createRef для оголошення посилання всередині компонента класу .

import { createRef, Component } from 'react';

class MyComponent extends Component {
  intervalRef = createRef();
  inputRef = createRef();
  // ...

Дивіться більше прикладів нижче.

Параметри

createRef не приймає жодних параметрів.

Повертає

createRef повертає об'єкт з однією властивістю:

current: Початково встановлено значення null. Пізніше ви можете змінити це значення на будь-яке інше. Якщо ви передасте React об'єкт рефа як атрибут ref вузлу JSX, React встановить його властивість current.

Застереження

createRef завжди повертає об'єкт different. Це еквівалентно написанню { current: null } yourself.
У функціональному компоненті вам, ймовірно, потрібен useRef, який завжди повертає той самий об'єкт.
const ref = useRef() еквівалентно const [ref, _] = useState(() => createRef(null)).

Використання

Оголошення рефа у компоненті класу

Щоб оголосити реф всередині компонента класу , потрібно викликати createRef і присвоїти його результат полю класу:

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

Якщо ви зараз передасте ref={this.inputRef} до <input> у вашому JSX, React заповнить this.inputRef.current вхідним вузлом DOM. Наприклад, ось як ви можете створити кнопку, яка фокусує введення:

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

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

Альтернативи

Перехід від класу з `createRef` до функції з `useRef`

У новому коді рекомендується використовувати функціональні компоненти замість класових компонентів. Якщо у вас є деякі існуючі класові компоненти, що використовують createRef, ось як ви можете їх перетворити. Це оригінальний код:

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

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

Коли ви перетворюєте цей компонент з класу на функцію, замініть виклики до createRef викликами до useRef:

import { useRef } from 'react';

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

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

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

[email protected]