Обратиться к элементу через JavaScript (Ref)

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

// Неправильно для элементов React
document.querySelector('#react-element');

Способ будет работать, но он не совсем корректный. Для обращения к элементам через JavaScript лучше использовать рефы (англ. Ref).

class App extends React.Component {

    constructor(props) {
        super(props);

        this.buttonRef = React.createRef();
    }

    render() {
        return (
            <div>
                <button ref={this.buttonRef}>Спрятать кнопку</button>
            </div>
        );
    }

}

Теперь в методах React можно обращаться к данному объекту через this.buttonRef.current.

// Стоит обратить внимание, что в конце указан "current"
const button = this.buttonRef.current;

// Теперь возможно использоваться методы JavaScript для объекта "button"
button.style.display = "none";

Пример кода на CodePen

Рефы рекомендуется использовать там, где нельзя обойтись без пропсов. Например, если надо скрыть элемент, то лучше использовать пропс "isOpen". А если надо сделать фокус на текстовом поле, или воспроизвести медиа, то здесь можно использовать рефы.

Управляемые и неуправляемые компоненты

В React сушествует терминология «управляемый» и «неуправляемый компонент».

Если значения компонента контролирует реакт (через стейты), то компонен считается управляемый. Если же значение получается через рефы, то компонент называется неуправляемый.