logo

TechCodeview

React Refs

Refs е стенографията, използвана за препратки в React. То е подобно на ключове в React. Това е атрибут, който прави възможно съхраняването на препратка към определени DOM възли или React елементи. Той предоставя начин за достъп до React DOM възли или React елементи и как да взаимодействате с него. Използва се, когато искаме да променим стойността на дъщерен компонент, без да използваме props.

Кога да използвате реф

Refs могат да се използват в следните случаи:

  • Когато се нуждаем от измервания на DOM, като управление на фокуса, избор на текст или възпроизвеждане на медия.
  • Използва се при задействане на императивни анимации.
  • При интегриране с DOM библиотеки на трети страни.
  • Може да се използва и при обратни повиквания.

Кога да не използвате Ref

  • Използването му трябва да се избягва за всичко, което може да се направи декларативно . Например, вместо да използвате отворен() и близо() методи на компонент Dialog, трябва да подадете an е отворено опора на него.
  • Трябва да избягвате прекомерната употреба на Refs.

Как да създадете реф

В React Refs могат да бъдат създадени чрез използване React.createRef() . Може да бъде присвоен на React елементи чрез реф атрибут. Обикновено се присвоява на свойство на екземпляр, когато се създава компонент, и след това може да се използва в целия компонент.

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

Как да получите достъп до реф

В React, когато ref се предава на елемент в метода за рендиране, препратка към възела може да бъде достъпна чрез текущия атрибут на ref.

 const node = this.callRef.current;

Реф. текущи свойства

Референтната стойност се различава в зависимост от типа на възела:

  • Когато атрибутът 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

Добавете Ref към компонентите на класа

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

Пример

 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

Реф

В реакция има друг начин за използване на refs, който се нарича ' реф ' и дава повече контрол, когато реферите са комплект и ненастроен . Вместо да създава refs чрез метод createRef(), React позволява начин за създаване на refs чрез предаване на функция за обратно извикване към атрибута 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 пожари. Преминаването на refs за обратно извикване между компонентите е същото, както можете да работите с refs на обекти, които се създават с React.createRef().

Изход

React Refs

Препращане на Ref от един компонент към друг компонент

Ref forwarding е техника, която се използва за предаване на 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;

В горния пример има компонент Въвеждане на текст което има дете като поле за въвеждане. Сега, за да преминете или препратите реф до входа, първо създайте реф и след това предайте реф надолу към . След това React препраща референта към напредРеф функция като втори аргумент. След това препращаме този реф аргумент надолу към . Сега стойността на DOM възела може да бъде достъпна на inputRef.current .

Реагирайте с useRef()

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

Синтаксис

 const refContainer = useRef(initialValue);

Пример

В кода по-долу, useRef е функция, която се присвоява на променлива, inputRef , и след това прикрепен към атрибут, наречен ref вътре в HTML елемента, в който искате да направите препратка.

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