logo

TechCodeview

Реацт Рефс

Рефс је скраћеница која се користи за референце у Реацт-у. Слично је са кључеви у Реацт-у. То је атрибут који омогућава чување референце на одређене ДОМ чворове или Реацт елементе. Пружа начин за приступ Реацт ДОМ чворовима или Реацт елементима и начин интеракције са њима. Користи се када желимо да променимо вредност подређене компоненте, а да не користимо пропс.

Када користити Реф

Референце се могу користити у следећим случајевима:

  • Када су нам потребна ДОМ мерења као што су управљање фокусом, избор текста или репродукција медија.
  • Користи се за покретање императивних анимација.
  • Приликом интеграције са ДОМ библиотекама треће стране.
  • Такође се може користити као у повратним позивима.

Када не користити Реф

  • Његову употребу треба избегавати за све што се може учинити декларативно . На пример, уместо коришћења опен() и Близу() методе на компоненти дијалога, потребно је да проследите ан је отворен потпора томе.
  • Требало би да избегавате прекомерну употребу Реф.

Како креирати Реф

У Реацт-у, референце се могу креирати коришћењем Реацт.цреатеРеф() . Може се доделити Реацт елементима преко реф атрибут. Обично се додељује својству инстанце када се компонента креира, а затим се може референцирати у целој компоненти.

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

Како приступити Реф

У Реацт-у, када се реф проследи елементу унутар методе рендеровања, референци на чвор се може приступити преко тренутног атрибута реф.

 const node = this.callRef.current;

Реф. тренутна својства

Референтна вредност се разликује у зависности од типа чвора:

  • Када се атрибут реф користи у ХТМЛ елементу, реф креиран са Реацт.цреатеРеф() прима основни ДОМ елемент као свој Тренутни имовина.
  • Ако се атрибут реф користи на компоненти прилагођене класе, онда реф објекат прима монтиран инстанцу компоненте као њено тренутно својство.
  • Атрибут реф се не може користити на компоненте функције јер немају инстанце.

Додајте Реф у ДОМ елементе

У следећем примеру, додајемо реф за чување референце на ДОМ чвор или елемент.

 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;

Излаз

Реацт Рефс

Додајте референцу компонентама класе

У следећем примеру, додајемо реф за чување референце на компоненту класе.

Пример

 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;

Излаз

Реацт Рефс

Цаллбацк рефс

У реаговању, постоји још један начин коришћења референци који се зове ' повратни позив реф ' и даје већу контролу када су судије комплет и унсет . Уместо креирања реф-ова методом цреатеРеф(), Реацт дозвољава начин за креирање реф-ова прослеђивањем функције повратног позива атрибуту реф компоненте. Изгледа као код у наставку.

 this.callRefInput = element} /&gt;

Функција повратног позива се користи за чување референце на ДОМ чвор у својству инстанце и може јој се приступити на другом месту. Може се приступити на следећи начин:

 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;

У горњем примеру, Реацт ће позвати повратни позив 'реф' да сачува референцу на улазни ДОМ елемент када компонента моунтс , а када компонента унмоунтс , назовите са нула . Референти су увек савремен пре цомпонентДидМоунт или цомпонентДидУпдате пожари. Пролаз повратних позива између компоненти је исти као што можете да радите са референцама објеката, који се креирају помоћу Реацт.цреатеРеф().

Излаз

Реацт Рефс

Прослеђивање Реф са једне компоненте на другу компоненту

Реф форвардинг је техника која се користи за прослеђивање а реф преко компоненте до једне од њених подређених компоненти. Може се извести коришћењем Реацт.форвардРеф() методом. Ова техника је посебно корисна са компоненте вишег реда и посебно се користи у библиотекама компоненти за вишекратну употребу. Најчешћи пример је дат у наставку.

Пример

 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;

У горњем примеру постоји компонента ТектИнпут која има дете као поље за унос. Сада, да проследите или проследите реф до улаза, прво креирајте реф, а затим проследите свог реф . Након тога, Реацт прослеђује реф на форвардРеф функционише као други аргумент. Затим, прослеђујемо овај аргумент реф на . Сада се вредности ДОМ чвора може приступити на инпутРеф.цуррент .

Реагујте са усеРеф()

Уводи се у Реаговати 16.7 и изнад верзије. Помаже да се приступи ДОМ чвору или елементу, а затим можемо да ступимо у интеракцију са тим ДОМ чвором или елементом, као што је фокусирање улазног елемента или приступ вредности улазног елемента. Враћа реф објекат чији .Тренутни својство иницијализовано на пренесени аргумент. Враћени објекат постоји током животног века компоненте.

Синтакса

 const refContainer = useRef(initialValue);

Пример

У коду испод, усеРеф је функција која се додељује променљивој, инпутРеф , а затим приложен атрибуту који се зове реф унутар ХТМЛ елемента на који желите да референцирате.

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