logo

TechCodeview

React Refs

Refs - це скорочення, яке використовується для посилання у React. Це схоже на ключі у React. Це атрибут, який дозволяє зберігати посилання на певні вузли DOM або елементи React. Він забезпечує спосіб доступу до вузлів React DOM або елементів React і способів взаємодії з ними. Він використовується, коли ми хочемо змінити значення дочірнього компонента, не використовуючи пропси.

Коли використовувати посилання

Посилання можна використовувати в таких випадках:

  • Коли нам потрібні вимірювання DOM, наприклад керування фокусом, виділення тексту або відтворення медіа.
  • Він використовується для запуску імперативних анімацій.
  • При інтеграції зі сторонніми бібліотеками DOM.
  • Його також можна використовувати як у зворотних викликах.

Коли не використовувати Ref

  • Слід уникати його використання для всього, що можна зробити декларативно . Наприклад, замість використання ВІДЧИНЕНО() і закрити() у компоненті Dialog вам потрібно передати isOpen опора на це.
  • Ви повинні уникати надмірного використання Refs.

Як створити Refs

У React посилання можна створювати за допомогою React.createRef() . Його можна призначити елементам React за допомогою посилання атрибут. Зазвичай воно призначається властивості екземпляра під час створення компонента, а потім на нього можна посилатися в усьому компоненті.

 class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } }

Як отримати доступ до Ref

У React, коли ref передається елементу всередині методу render, посилання на вузол можна отримати через поточний атрибут ref.

 const node = this.callRef.current;

Посилання на поточні властивості

Значення ref залежить від типу вузла:

  • Коли атрибут ref використовується в елементі HTML, ref, створений за допомогою React.createRef() отримує основний елемент DOM як свій поточний власність.
  • Якщо атрибут ref використовується в спеціальному компоненті класу, тоді об’єкт ref отримує встановлений екземпляр компонента як його поточна властивість.
  • Атрибут ref не можна використовувати на функціональні компоненти тому що вони не мають екземплярів.

Додайте Ref до елементів DOM

У наведеному нижче прикладі ми додаємо посилання для зберігання посилання на вузол або елемент DOM.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); this.addingRefInput = this.addingRefInput.bind(this); } addingRefInput() { this.callRef.current.focus(); } render() { return ( <h2>Adding Ref to DOM element</h2> ); } } export default App;

Вихід

React Refs

Додайте посилання до компонентів класу

У прикладі нижче ми додаємо посилання для зберігання посилання на компонент класу.

приклад

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; function CustomInput(props) { let callRefInput = React.createRef(); function handleClick() { callRefInput.current.focus(); } return ( <h2>Adding Ref to Class Component</h2> ); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); } focusRefInput() { this.callRefInput.current.focus(); } render() { return ( ); } } export default App;

Вихід

React Refs

Зворотні дзвінки

У React є інший спосіб використання посилань, який називається ' посилання зворотного виклику ' і це дає більше контролю, коли судді є встановити і не встановлено . Замість створення посилань за допомогою методу createRef(), React дозволяє створювати посилання шляхом передачі функції зворотного виклику в атрибут ref компонента. Це виглядає як наведений нижче код.

 this.callRefInput = element} /&gt;

Функція зворотного виклику використовується для збереження посилання на вузол DOM у властивості екземпляра, і до неї можна отримати доступ з іншого місця. Його можна отримати, як показано нижче:

 this.callRefInput.value

Приклад нижче допомагає зрозуміти роботу зворотних посилань.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element =&gt; { this.callRefInput = element; }; this.focusRefInput = () =&gt; { //Focus the input using the raw DOM API if (this.callRefInput) this.callRefInput.focus(); }; } componentDidMount() { //autofocus of the input on mount this.focusRefInput(); } render() { return ( <h2>Callback Refs Example</h2> ); } } export default App;

У наведеному вище прикладі React викличе зворотний виклик 'ref', щоб зберегти посилання на вхідний елемент DOM, коли компонент кріплення , а коли компонент розмонтовується , називати його с нуль . Рефери є завжди актуальний перед componentDidMount або componentDidUpdate пожежі. Передача посилань зворотного виклику між компонентами така ж, як і ви можете працювати з посиланнями об’єктів, які створюються за допомогою React.createRef().

Вихід

React Refs

Пересилання Ref від одного компонента до іншого компонента

Переадресація посилань – це техніка, яка використовується для передачі a посилання через компонент до одного з його дочірніх компонентів. Це можна виконати за допомогою React.forwardRef() метод. Ця техніка особливо корисна з компоненти вищого порядку і спеціально використовується в багаторазових бібліотеках компонентів. Найпоширеніший приклад наведено нижче.

приклад

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; const TextInput = React.forwardRef((props, ref) =&gt; ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e =&gt; { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}&gt; Submit ); } } export default App;

У наведеному вище прикладі є компонент TextInput що має дочірнє поле введення. Тепер, щоб передати або переслати посилання до входу, спочатку створіть посилання, а потім передайте своє посилання . Після цього React пересилає реф до впередRef функція як другий аргумент. Далі ми пересилаємо цей аргумент посилання . Тепер значення вузла DOM можна отримати за адресою inputRef.current .

Реагуйте за допомогою useRef()

Він вводиться в Реагувати 16.7 і вище версія. Це допомагає отримати доступ до вузла або елемента DOM, і тоді ми можемо взаємодіяти з цим вузлом або елементом DOM, наприклад фокусуватися на вхідному елементі або отримати доступ до значення вхідного елемента. Він повертає об’єкт ref .текучий властивість, ініціалізована переданим аргументом. Повернений об’єкт зберігається протягом усього життя компонента.

Синтаксис

 const refContainer = useRef(initialValue);

приклад

У наведеному нижче коді useRef це функція, яка призначається змінній, inputRef , а потім додається до атрибута під назвою ref всередині елемента HTML, на який ви хочете зробити посилання.

 function useRefExample() { const inputRef= useRef(null); const onButtonClick = () =&gt; { inputRef.current.focus(); }; return ( Submit ); }