Refs, aşağıdakiler için kullanılan kısaltmadır: Referanslar React'ta. Benzer anahtarlar React'ta. Belirli DOM düğümlerine veya React öğelerine referansın saklanmasını mümkün kılan bir özelliktir. React DOM düğümlerine veya React öğelerine erişmenin ve bunlarla nasıl etkileşime geçileceğinin bir yolunu sağlar. Bir alt bileşenin değerini, prop kullanmadan değiştirmek istediğimizde kullanılır.
Referanslar Ne Zaman Kullanılır?
Referanslar aşağıdaki durumlarda kullanılabilir:
- Odağı yönetme, metin seçimi veya medya oynatma gibi DOM ölçümlerine ihtiyacımız olduğunda.
- Zorunlu animasyonların tetiklenmesinde kullanılır.
- Üçüncü taraf DOM kitaplıklarıyla entegrasyon yaparken.
- Geri aramalarda olduğu gibi de kullanılabilir.
Ref'ler ne zaman kullanılmamalıdır?
- Yapılabilecek herhangi bir şey için kullanımından kaçınılmalıdır. bildirimsel olarak . Örneğin, kullanmak yerine açık() Ve kapalı() Bir Dialog bileşenindeki yöntemler için, bir açık ona destek olun.
- Referansların aşırı kullanımından kaçınmalısınız.
Referanslar nasıl oluşturulur?
React'ta Ref'ler kullanılarak oluşturulabilir. React.createRef() . React elemanlarına şu adresten atanabilir: referans bağlanmak. Bir bileşen oluşturulduğunda genellikle bir örnek özelliğe atanır ve daha sonra bileşen boyunca referans verilebilir.
class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } } Referanslara nasıl erişilir?
React'ta, render yöntemi içindeki bir öğeye bir ref iletildiğinde, ref'in geçerli özelliği aracılığıyla düğüme yapılan bir referansa erişilebilir.
const node = this.callRef.current;
Mevcut Özellikleri referans alır
Ref değeri düğümün türüne bağlı olarak farklılık gösterir:
- HTML öğesinde ref niteliği kullanıldığında, ref özelliği ile oluşturulur. React.createRef() temel DOM öğesini kendi olarak alır akım mülk.
- Ref niteliği özel bir sınıf bileşeninde kullanılıyorsa, ref nesnesi şunu alır: monte edilmiş bileşenin örneğini geçerli özelliği olarak kullanın.
- ref niteliği kullanılamaz fonksiyon bileşenleri çünkü örnekleri yok.
DOM öğelerine Ref ekle
Aşağıdaki örnekte, referansı bir DOM düğümüne veya öğesine depolamak için bir ref ekliyoruz.
import React, { Component } from 'react'; import { render } from 'react-dom'; 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; Çıktı
Sınıf bileşenlerine Ref ekle
Aşağıdaki örnekte, referansı bir sınıf bileşenine depolamak için bir ref ekliyoruz.
Örnek
import React, { Component } from 'react'; import { render } from 'react-dom'; 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; Çıktı
Geri arama referansları
Tepki olarak ref'leri kullanmanın ' adı verilen başka bir yolu daha var. geri arama referansları ' ve refler olduğunda daha fazla kontrol sağlar ayarlamak Ve ayarsız . React, createRef() yöntemiyle referanslar oluşturmak yerine, bir bileşenin ref niteliğine bir geri çağırma işlevi ileterek referanslar oluşturmanın bir yolunu sağlar. Aşağıdaki koda benziyor.
this.callRefInput = element} />
Geri çağırma işlevi, bir örnek özelliğinde DOM düğümüne bir başvuruyu depolamak için kullanılır ve başka bir yerden erişilebilir. Aşağıdaki şekilde erişilebilir:
this.callRefInput.value
Aşağıdaki örnek, geri arama referanslarının çalışmasını anlamanıza yardımcı olur.
import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element => { this.callRefInput = element; }; this.focusRefInput = () => { //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; Yukarıdaki örnekte React, bileşen çalıştırıldığında giriş DOM öğesine olan referansı saklamak için 'ref' geri çağrısını çağıracaktır. bağlar ve bileşen ne zaman bağlantıyı keser , şununla çağır: hükümsüz . Referanslar her zaman güncel önce bileşenDidMount veya bileşenDidUpdate yangınlar. Bileşenler arasındaki geri çağırma başvurularının geçişi, React.createRef() ile oluşturulan nesne başvurularıyla çalışabileceğinizle aynıdır.
Çıktı
Ref'in bir bileşenden diğer bileşene iletilmesi
Referans yönlendirme, bir mesajı iletmek için kullanılan bir tekniktir. referans bir bileşen aracılığıyla onun alt bileşenlerinden birine. Kullanılarak gerçekleştirilebilir. React.forwardRef() yöntem. Bu teknik özellikle aşağıdaki durumlarda faydalıdır: daha yüksek dereceli bileşenler ve özellikle yeniden kullanılabilir bileşen kitaplıklarında kullanılır. En yaygın örnek aşağıda verilmiştir.
Örnek
import React, { Component } from 'react'; import { render } from 'react-dom'; const TextInput = React.forwardRef((props, ref) => ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e => { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}> Submit ); } } export default App; Yukarıdaki örnekte bir bileşen var Metin Girişi giriş alanı olarak bir çocuğu olan. Şimdi, iletmek veya iletmek için referans girişe doğru önce bir referans oluşturun ve ardından referansınızı aşağıya iletin . Bundan sonra React referansı sunucuya iletir. ileriRef ikinci bir argüman olarak işlev görür. Daha sonra, bu ref argümanını şu adrese ileteceğiz: . Artık DOM düğümünün değerine şuradan erişilebilir: girişRef.akım .
useRef() ile tepki verin
İçinde tanıtıldı Tepki 16.7 ve üzeri sürüm. DOM düğümüne veya öğesine erişmeye yardımcı olur ve ardından bu DOM düğümü veya öğesiyle, giriş öğesine odaklanmak veya giriş öğesi değerine erişmek gibi etkileşimde bulunabiliriz. olan ref nesnesini döndürür. .akım geçirilen bağımsız değişkene başlatılan özellik. Döndürülen nesne, bileşenin kullanım ömrü boyunca kalıcı olur.
Sözdizimi
const refContainer = useRef(initialValue);
Örnek
Aşağıdaki kodda, kullanımRef bir değişkene atanan bir fonksiyondur, girişRef , ve daha sonra başvuruda bulunmak istediğiniz HTML öğesinin içinde ref adı verilen bir özniteliğe eklenir.
function useRefExample() { const inputRef= useRef(null); const onButtonClick = () => { inputRef.current.focus(); }; return ( Submit ); }