Перейти к содержанию

createRef

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

createRef создает объект ref, который может содержать произвольное значение.

1
2
3
4
class MyInput extends Component {
    inputRef = createRef();
    // ...
}

Описание

createRef()

Вызовите createRef для объявления ссылки внутри компонента класса.

1
2
3
4
5
6
7
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 и присвойте его результат полю класса:

1
2
3
4
5
6
7
import { Component, createRef } from 'react';

class Form extends Component {
    inputRef = createRef();

    // ...
}

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
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, вот как их можно преобразовать. Это оригинальный код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
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>
        </>
    );
}

Ссылки

Комментарии