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. Позже вы можете установить его в другое значение. Если вы передадите объект ref в React как атрибут ref узла JSX, React установит его свойство current.

Предостережения

• createRef всегда возвращает различный объект. Это эквивалентно написанию { current: null } самостоятельно.
• В компоненте функции, вероятно, вместо этого вам нужен 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 к функции с 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>
        </>
    );
}

Ссылки

• https://react.dev/reference/react/createRef

Комментарии