logo

TechCodeview

Reagovat Ref

Refs je zkratka používaná pro Reference v Reactu. Je to podobné jako klíče v Reactu. Je to atribut, který umožňuje uložit odkaz na konkrétní uzly DOM nebo prvky React. Poskytuje způsob, jak získat přístup k uzlům React DOM nebo prvkům React a jak s nimi pracovat. Používá se, když chceme změnit hodnotu podřízené komponenty bez použití rekvizit.

Kdy použít Ref

Odkazy lze použít v následujících případech:

  • Když potřebujeme měření DOM, jako je řízení fokusu, výběr textu nebo přehrávání médií.
  • Používá se při spouštění imperativních animací.
  • Při integraci s knihovnami DOM třetích stran.
  • Lze jej také použít jako při zpětných voláních.

Kdy nepoužívat Ref

  • Jeho použití je třeba se vyhnout všemu, co lze udělat deklarativně . Například místo použití OTEVŘENO() a zavřít() metod na komponentě Dialog, musíte předat je otevřeno podpěra k tomu.
  • Měli byste se vyhnout nadměrnému používání Ref.

Jak vytvořit Ref

V React lze odkazy vytvořit pomocí React.createRef() . Může být přiřazen k prvkům React pomocí ref atribut. Běžně se přiřazuje vlastnosti instance, když je komponenta vytvořena, a pak lze odkazovat v rámci komponenty.

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

Jak získat přístup k Ref

Když je v Reactu předán ref prvku uvnitř metody renderování, lze k odkazu na uzel přistupovat prostřednictvím aktuálního atributu ref.

 const node = this.callRef.current;

Odkazuje na aktuální vlastnosti

Hodnota ref se liší v závislosti na typu uzlu:

  • Když je v elementu HTML použit atribut ref, ref vytvořený pomocí React.createRef() přijme základní prvek DOM jako svůj aktuální vlastnictví.
  • Pokud je atribut ref použit na vlastní komponentě třídy, pak objekt ref obdrží jízdní instance komponenty jako její aktuální vlastnost.
  • Atribut ref nelze použít na funkční komponenty protože nemají instance.

Přidejte odkaz k prvkům DOM

V níže uvedeném příkladu přidáváme odkaz pro uložení odkazu na uzel nebo prvek 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;

Výstup

Reagovat Ref

Přidat Ref ke komponentám třídy

V níže uvedeném příkladu přidáváme odkaz pro uložení odkazu na komponentu třídy.

Příklad

 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;

Výstup

Reagovat Ref

Reference zpětného volání

V reakci existuje další způsob použití odkazů, který se nazývá ' reference zpětného volání a poskytuje větší kontrolu, když jsou ref soubor a odstaveno . Namísto vytváření refs metodou createRef() umožňuje React způsob, jak vytvářet refs předáním funkce zpětného volání do atributu ref komponenty. Vypadá to jako níže uvedený kód.

 this.callRefInput = element} /&gt;

Funkce zpětného volání se používá k uložení odkazu na uzel DOM ve vlastnosti instance a lze k ní přistupovat jinde. Lze k němu přistupovat následovně:

 this.callRefInput.value

Níže uvedený příklad pomáhá pochopit fungování zpětných odkazů.

 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;

Ve výše uvedeném příkladu React zavolá zpětné volání 'ref' pro uložení odkazu na vstupní prvek DOM, když komponenta montuje , a když součást odpojí , zavolejte to pomocí nula . Reference jsou vždy aktuální před komponentDidMount nebo componentDidUpdate požáry. Předávání zpětných odkazů mezi komponentami je stejné, jako můžete pracovat s objekty refs, které jsou vytvořeny pomocí React.createRef().

Výstup

Reagovat Ref

Přesměrování ref z jedné součásti do jiné součásti

Ref forwarding je technika, která se používá pro předávání a ref přes komponentu k jedné z jejích podřízených komponent. To lze provést pomocí React.forwardRef() metoda. Tato technika je zvláště užitečná s komponenty vyššího řádu a speciálně používané v knihovnách opakovaně použitelných komponent. Nejběžnější příklad je uveden níže.

Příklad

 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;

Ve výše uvedeném příkladu je komponenta TextInput která má jako vstupní pole dítě. Nyní k předání nebo předání ref dolů na vstup, nejprve vytvořte ref a poté předejte svůj ref dolů . Poté React předá referenci na vpředRef fungovat jako druhý argument. Dále předáme tento argument ref dolů . Nyní je k hodnotě uzlu DOM přístup vstupníRef.proud .

Reagovat pomocí useRef()

Je představen v Reagovat 16.7 a vyšší verze. Pomáhá získat přístup k uzlu nebo prvku DOM a pak můžeme s tímto uzlem nebo prvkem DOM interagovat, jako je zaměření vstupního prvku nebo přístup k hodnotě vstupního prvku. Vrací objekt ref, jehož .aktuální vlastnost inicializovaná na předaný argument. Vrácený objekt přetrvává po celou dobu životnosti komponenty.

Syntax

 const refContainer = useRef(initialValue);

Příklad

V níže uvedeném kódu useRef je funkce, která je přiřazena k proměnné, vstupRef a poté připojen k atributu s názvem ref uvnitř elementu HTML, na který chcete odkazovat.

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