{"id":11064,"date":"2025-01-30T18:45:11","date_gmt":"2025-01-30T15:45:11","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-forward-ref-bileseni-kontrolu\/"},"modified":"2025-01-30T18:45:11","modified_gmt":"2025-01-30T15:45:11","slug":"reactte-forward-ref-bileseni-kontrolu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-forward-ref-bileseni-kontrolu\/","title":{"rendered":"React’te Forward Ref Bile\u015feni Kontrol\u00fc"},"content":{"rendered":"

React’te Forward Ref Bile\u015feni Kontrol\u00fc<\/p>\n

Merhaba! Ben Fatih Soysal ve bug\u00fcn React uygulamalar\u0131n\u0131zda bir bile\u015fenin ForwardRef bile\u015feni olup olmad\u0131\u011f\u0131n\u0131 nas\u0131l kontrol edebilece\u011finizi detayl\u0131 olarak ele alaca\u011f\u0131z. ForwardRef, React’te fonksiyonel bile\u015fenlere ref’leri iletmenin g\u00fc\u00e7l\u00fc bir yoludur. Ancak, bazen bir bile\u015fenin ForwardRef ile olu\u015fturulup olu\u015fturulmad\u0131\u011f\u0131n\u0131 bilmeniz gerekebilir. Bu makalede, bu kontrol\u00fc yapman\u0131n farkl\u0131 yollar\u0131n\u0131 ve bunlar\u0131n kullan\u0131m senaryolar\u0131n\u0131 inceleyece\u011fiz. \u00d6ncelikle, ForwardRef’in ne oldu\u011funu ve neden \u00f6nemli oldu\u011funu hat\u0131rlatal\u0131m.<\/p>\n

ForwardRef Nedir ve Neden \u00d6nemlidir?<\/h2>\n

ForwardRef, React’te fonksiyonel bile\u015fenlere ref’ler (referanslar) iletmenizi sa\u011flayan bir \u00f6zelliktir. Ref’ler, DOM elemanlar\u0131na veya bile\u015fenlere do\u011frudan eri\u015fim sa\u011flar. Normalde fonksiyonel bile\u015fenler ref’leri do\u011frudan kullanamazlar. Ancak, ForwardRef kullanarak, bu ref’leri alt bile\u015fenlere iletebilir ve orada kullanabilirsiniz. Bu sayede, form elemanlar\u0131n\u0131 kontrol etmek, animasyonlar uygulamak veya bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fcyle ilgili i\u015flemler ger\u00e7ekle\u015ftirmek gibi bir\u00e7ok senaryoda esneklik kazan\u0131rs\u0131n\u0131z. \u00d6rne\u011fin, bir form alan\u0131n\u0131n odaklanmas\u0131n\u0131 kontrol etmek i\u00e7in ForwardRef kullanabilirsiniz.<\/p>\n

Bir Bile\u015fenin ForwardRef Olup Olmad\u0131\u011f\u0131n\u0131 Kontrol Etme<\/h2>\n

Peki, bir bile\u015fenin ForwardRef ile olu\u015fturulup olu\u015fturulmad\u0131\u011f\u0131n\u0131 nas\u0131l anlar\u0131z? Bunun i\u00e7in birka\u00e7 y\u00f6ntem mevcuttur. En yayg\u0131n y\u00f6ntem, bile\u015fenin type \u00f6zelli\u011fini kontrol etmektir.<\/p>\n

Y\u00f6ntem 1: type \u00d6zelli\u011fini Kontrol Etme<\/h3>\n

ForwardRef ile olu\u015fturulan bir bile\u015fenin type \u00f6zelli\u011fi, forwardRef fonksiyonunun kendisine i\u015faret eder. Bu nedenle, bu \u00f6zelli\u011fi kontrol ederek bile\u015fenin ForwardRef olup olmad\u0131\u011f\u0131n\u0131 anlayabiliriz. \u0130\u015fte \u00f6rnek bir kod:<\/p>\n

\nfunction isForwardRefComponent(component) {\n  return component.type && component.type.$$typeof === Symbol.for('react.forward_ref');\n}\n\n\/\/ \u00d6rnek kullan\u0131m:\nconst MyComponent = React.forwardRef((props, ref) => { \/* ... *\/ });\nconsole.log(isForwardRefComponent(MyComponent)); \/\/ true\n\nconst MyRegularComponent = (props) => { \/* ... *\/ };\nconsole.log(isForwardRefComponent(MyRegularComponent)); \/\/ false\n<\/code><\/pre>\n
Bu fonksiyon,  girilen bile\u015fenin type \u00f6zelli\u011finin  Symbol.for(‘react.forward_ref’) de\u011ferine e\u015fit olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.  E\u011fer e\u015fitse,  bile\u015fen bir ForwardRef bile\u015fenidir.  Yoksa,  normal bir bile\u015fendir.  Bu y\u00f6ntem en g\u00fcvenilir y\u00f6ntemdir, \u00e7\u00fcnk\u00fc React’in i\u00e7 yap\u0131s\u0131ndan do\u011frudan yararlan\u0131r.<\/p>\n
Y\u00f6ntem 2: displayName \u00d6zelli\u011fini Kontrol Etme (Daha Az G\u00fcvenilir)<\/h3>\n
Baz\u0131 durumlarda,  ForwardRef bile\u015fenleri displayName \u00f6zelli\u011fi ile tan\u0131mlanabilir.  Ancak bu y\u00f6ntem g\u00fcvenilir de\u011fildir, \u00e7\u00fcnk\u00fc geli\u015ftirici taraf\u0131ndan displayName \u00f6zelli\u011fi eklenmeyebilir. Bu y\u00fczden, birinci y\u00f6nteme \u00f6ncelik vermenizi \u00f6neririm.<\/p>\n
Sonu\u00e7<\/h2>\n
React’te bir bile\u015fenin ForwardRef olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in en g\u00fcvenilir yol,  bile\u015fenin type \u00f6zelli\u011fini kontrol etmektir.  Yukar\u0131da g\u00f6sterilen isForwardRefComponent fonksiyonunu kullanarak bu kontrol\u00fc kolayca yapabilirsiniz.  Bu bilgi,  React uygulaman\u0131zda daha karma\u015f\u0131k bile\u015fenler olu\u015ftururken ve ref y\u00f6netimi yaparken size yard\u0131mc\u0131 olacakt\u0131r.  Daha fazla React ipucu ve \u00f6\u011fretici i\u00e7in  fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Umar\u0131m bu makale faydal\u0131 olmu\u015ftur.  Ba\u015fka sorular\u0131n\u0131z varsa,  l\u00fctfen yorumlarda belirtin.<\/p>\n
Referanslar:<\/strong><\/p>\n