Ref-атрибути і DOM в React

React. Просунуті керівництва. Частина Третя
Продовження серії перекладів розділу "Просунуті керівництва" (Advanced Guides) офіційній документації бібліотеки React.js.
Ref-атрибути і DOM в React
У типовому потоці даних React, властивості (props) — це єдиний спосіб, з допомогою якого батьки взаємодіють зі своїми нащадками. Для модифікації нащадка, вам необхідно заново відобразити (зробити ререндеринг) його з новими властивостями. Однак, в деяких випадках, вам знадобиться модифікувати нащадка безпосередньо, поза основного потоку. Зміна нащадка можливо у випадках, якщо він є екземпляром компонента React або елементом DOM. Для обох цих випадків React має особливий спосіб зміни.

Атрибут зворотного виклику ref
React підтримує спеціальний атрибут, який може бути присвоєно будь-якого компонента. Атрибут
ref
приймає функцію зворотного виклику, і викликає її після того, як компонент монтується в DOM або віддаляється з нього.
Коли атрибут
ref
використовується в елементі HTML, функція зворотного виклику приймає базовий елемент DOM в якості аргументу. Наприклад, наступний код використовує функцію зворотного виклику, зазначену в
ref
, для збереження посилання на вузол DOM:
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
}

focus() {
// Переміщення фокуса на полі текстового вводу (input) з явним використанням вихідного DOM API
this.textInput.focus();
}

render() {
// Використання зворотного виклику `ref` для збереження посилання на полі текстового вводу (input)
// як елемента в DOM this.textInput.
return (
<div>
<input
type="text"
ref={(input) => { this.textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={this.focus}
/>
</div>
);
}
}

React викликає функцію зворотного виклику
ref
з елементом DOM в якості аргументу коли компонент монтується, і зі значенням
null
в якості аргументу коли компонент видаляється.
Використання зворотного виклику
ref
для установки властивості в класі — це загальноприйнятий шаблон для доступу до елементів DOM. Якщо в даний момент для цього завдання ви використовуєте
this.refs.myRefName
, ми рекомендуємо перейти до використання описаного нами шаблону.
Коли атрибут
ref
використовується в кастомном компоненті React, функція зворотного виклику приймає змонтований примірник компонента в якості аргументу. Наприклад, якщо ми захотіли обернути input з попереднього прикладу в компонент
CustomTextInput
для симуляції кліка відразу після монтування:
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
}

focus() {
// Переміщення фокуса на полі текстового вводу (input) з явним використанням вихідного DOM API
this.textInput.focus();
}

render() {
// Використання зворотного виклику `ref` для збереження посилання на полі текстового вводу (input)
// як елемента в DOM this.textInput.
return (
<div>
<input
type="text"
ref={(input) => { this.textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={this.focus}
/>
</div>
);
}
}

class AutoFocusTextInput extends React.Component {
componentDidMount() {
this.textInput.focus();
}

render() {
return (
<CustomTextInput
ref={(input) => { this.textInput = input; }} />
);
}
}

Можна використати атрибут
ref
з компонентом, побудованим на функції (stateless компонент), оскільки функція не має примірників. Однак, ви можете використовувати атрибут
ref
всередині такого компонента:
function CustomTextInput(props) {
// textInput задекларовано тут, т. к. зворотний виклик ref посилається на нього
let textInput = null;

function handleClick() {
textInput.focus();
}

return (
<div>
<input
type="text"
ref={(input) => { textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
); 
}

<h3 id=«ne-zloupotreblyayte-obratnymi-vyzovami-ref>Не зловживайте зворотніми викликами ref
Вашою першою думкою може бути — що використання ref "перетворить мрію у реальність" у вашому додатку. Якщо це так, то зупиніться і критично подумайте — чи вірно розташовані стану вашої ієрархії компонентів. Часто виникає така ситуація, що перерасположение стану вище у ієрархії компонентів, що воно знаходиться в даний момент, вирішує проблему. Дивіться керівництво Підйом Стану вище як приклад цього.
Попередні частини:
Джерело: React — Advanced Guides — Refs and the DOM
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.