Ref'ler ile DOM Manipülasyonu

Elemana ref alma

React tarafından yönetilen bir DOM elemanına erişmek için önce useRef Hook’unu içe aktarın:

import { useRef } from 'react';

Ardından bileşeninizin içinde bir ref bildirmek için kullanın:

const myRef = useRef(null);

Son olarak DOM elemanını almak istediğiniz JSX etiketine ref özelliği olarak ref’inizi iletin:

<div ref={myRef}>

useRef Hook’u current adlı tek bir özelliğe sahip bir nesne döndürür. Başlangıçta myRef.current, null olacaktır. React bu <div> için bir DOM elemanı oluşturduğunda React bu elemanın içine myRef.current referansı koyacaktır. Daha sonra bu DOM elemanına olay yöneticinizden erişebilir ve yerleşik tarayıcı API’lerini kullanabilirsiniz.

// Herhangi bir tarayıcı API'sini kullanabilirsiniz, örneğin:
myRef.current.scrollIntoView();

Örnek: Bir metin girişine odaklanma

Bu örnekte butona tıklamak input alanına odaklayacaktır:

Bunu uygulamak için:

1. useRef Hook’u ile inputRef’i bildirin.
2. <input ref={inputRef}> olarak geçin. React’e bu <input>’ta DOM elemanının içine inputRef.current’i koymasını söyler.
3. handleClick fonksiyonunda inputRef.current’tan input DOM elemanını okuyun ve focus() ile inputRef.current.focus() ögesini çağırın.
4. handleClick olay yöneticisini onClick ile <button> elemanına geçin.

DOM manipülasyonu ref için en yaygın kullanım olsa da useRef Hook’u, zamanlayıcı ID’ler gibi, React dışında başka şeyleri saklamak için de kullanılabilir. State’e benzer şekilde refler de renderlar arasında kalır. Ref, ayarladığınızda yeniden render etmeyi tetiklemeyen state değişkenleri gibidir. Ref hakkında bilgi edinin: Referencing Values with Refs.

Örnek: Bir öğeye scroll etmek

Bir bileşende birden fazla ref olabilir. Bu örnekte üç resimden oluşan bir carousel vardır. Her buton karşılık gelen ilgili DOM elemanında tarayıcıya scrollIntoView() metodunu çağırarak resmi ortalar.

<ul>
  {items.map((item) => {
    // Çalışmaz!
    const ref = useRef(null);
    return <li ref={ref} />;
  })}
</ul>

import { useRef, useState } from "react";

export default function CatFriends() {
  const itemsRef = useRef(null);
  const [catList, setCatList] = useState(setupCatList);

  function scrollToCat(cat) {
    const map = getMap();
    const node = map.get(cat);
    node.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center",
    });
  }

  function getMap() {
    if (!itemsRef.current) {
      // Map'i ilk kullanımda başlatın.
      itemsRef.current = new Map();
    }
    return itemsRef.current;
  }

  return (
    <>
      <nav>
        <button onClick={() => scrollToCat(catList[0])}>Neo</button>
        <button onClick={() => scrollToCat(catList[5])}>Millie</button>
        <button onClick={() => scrollToCat(catList[9])}>Bella</button>
      </nav>
      <div>
        <ul>
          {catList.map((cat) => (
            <li
              key={cat}
              ref={(node) => {
                const map = getMap();
                if (node) {
                  map.set(cat, node);
                } else {
                  map.delete(cat);
                }
              }}
            >
              <img src={cat} />
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

function setupCatList() {
  const catList = [];
  for (let i = 0; i < 10; i++) {
    catList.push("https://loremflickr.com/320/240/cat?lock=" + i);
  }

  return catList;
}

<li
  key={cat.id}
  ref={node => {
    const map = getMap();
    if (node) {
      // Add to the Map
      map.set(cat, node);
    } else {
      // Remove from the Map
      map.delete(cat);
    }
  }}
>

<li
  key={cat.id}
  ref={node => {
    const map = getMap();
    // Add to the Map
    map.set(cat, node);

    return () => {
      // Remove from the Map
      map.delete(cat);
    };
  }}
>

Başka bir bileşenin DOM elemanlarına erişme

<input /> gibi bir tarayıcı elemanı çıktısı veren yerleşik bir bileşene ref koyduğunuzda React bu ref’in current özelliğini karşılık gelen DOM elemanına ayarlar ( tarayıcıdaki asıl <input /> gibi).

Ancak <MyInput /> gibi kendi bileşeninize ref koymaya çalışırsanız varsayılan olarak null değeri alırsınız. İşte bunu gösteren bir örnek. Butona tıklamanın input’a nasıl odaklamadığına dikkat edin:

Sorunu fark etmenize yardımcı olmak için React ayrıca konsola bir hata yazdırır:

Bunun nedeni React’in varsayılan olarak bir bileşenin diğer bileşenlerin DOM elemanlarına erişmesine izin vermemesidir. Kendi alt elemanı için bile değil! Bu kasıtlı. Ref, az miktarda kullanılması gereken bir kaçış kapısıdır. another bileşeninin DOM elemanlarını manuel olarak manipüle etmek kodu işlevsiz hale getirebilir.

Bunun yerine DOM elemanlarını açığa çıkarmak isteyen bileşenlerin bu davranışı seçmesi gerekir. Bir bileşen ref’in alt elemanlarından birine “forwards” belirtebilir. MyInput, forwardRef API’sini şu şekilde kullanabilir:

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

Çalışma şekli şöyledir:

1. <MyInput ref={inputRef} /> React’e, karşılık gelen DOM elemanını inputRef.current’a koymasını söyler. Ancak bunu seçmek MyInput bileşenine bağlıdır. Varsayılan olarak bunu yapmaz.
2. MyInput bileşeni forwardRef kullanılarak tanımlanır. props’tan sonra bildirilen ikinci ref, parametre olarak yukarıdan inputRef’i almayı seçer.
3. MyInput aldığı ref’i içindeki <input>’a iletir.

Şimdi input’a odaklamak için butona tıklamak işe yarar:

Tasarım sistemlerinde button, input gibi düşük seviyeli bileşenlerin ref’leri DOM elemanlarına iletmeleri yaygın bir modeldir. Öte yandan formlar, listeler veya sayfa bölümleri gibi üst düzey bileşenler DOM yapısına yanlışlıkla eklenen bağımlılıkları önlemek için genellikle DOM elemanlarını göstermez.

import {
  forwardRef, 
  useRef, 
  useImperativeHandle
} from 'react';

const MyInput = forwardRef((props, ref) => {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    // Sadece focus'u ortaya çıkarın
    focus() {
      realInputRef.current.focus();
    },
  }));
  return <input {...props} ref={realInputRef} />;
});

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

React refleri ne zaman ekler?

React’te her güncelleme iki aşamaya ayrılır:

• React render etme esnasında ekranda ne olması gerektiğini anlamak için bileşenlerinizi çağırır.
• React commit esnasında değişiklikleri DOM’a uygular.

Genel olarak render etme esnasında ref’lere erişmek istemezsiniz. Bu, DOM elemanlarını tutan ref’ler için de geçerlidir. İlk render esnasında DOM elemanları henüz oluşturulmadığında ref.current, null olacaktır. Güncellemelerin render edilmesi esnasında DOM elemanları henüz güncellenmedi. Bu yüzden onları okumak için çok erken.

React commit esnasında ref.current ayarını yapar. React DOM’u güncellemeden önce etkilenen ref.current değerlerini null olarak ayarlar. DOM’u güncelledikten sonra React hemen ilgili DOM elemanını ayarlar.

Ref’lere genellikle olay yöneticisinden erişirsiniz. Ref ile bir şey yapmak istiyorsunuz ancak bunu yapmak için belirli bir olay yoksa bir Effect’e ihtiyacınız olabilir. Sonraki sayfalarda Effect’lerden bahsedeceğiz.

import { useState, useRef } from 'react';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    setText('');
    setTodos([ ...todos, newTodo]);
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        Add
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

setTodos([ ...todos, newTodo]);
listRef.current.lastChild.scrollIntoView();

flushSync(() => {
  setTodos([ ...todos, newTodo]);
});
listRef.current.lastChild.scrollIntoView();

import { useState, useRef } from 'react';
import { flushSync } from 'react-dom';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    flushSync(() => {
      setText('');
      setTodos([ ...todos, newTodo]);      
    });
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        Add
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

Ref’ler ile DOM manipülasyonu için en iyi uygulamalar

Ref’ler kaçış kapısıdır. Bunu sadece “React’in dışına çıkmanız” gerektiğinde kullanmalısınız. Bunun yaygın örnekleri arasında focus yönetimi, kaydırma konumu veya React’in göstermediği tarayıcı API’lerini çağırmak yer alır.

Focus ve kaydırma gibi işlemlere bağlı kalırsanız herhangi bir sorunla karşılaşmazsınız. Ancak DOM’u manuel olarak değiştirmeye çalışırsanız React’in yaptığı değişikliklerle çakışma riskiyle karşı karşıya kalabilirsiniz.

Bu sorunu göstermek için aşağıdaki örnekte karşılama mesajı ve iki buton yer almaktadır. İlk buton genellikle React’te yaptığınız koşullu render etme ve state kullanarak değerini değiştirmedir. İkinci buton React’in kontrolü dışındaki DOM’dan zorla kaldırmak için remove() DOM API’sini kullanır.

Birkaç kez “Toggle with setState”e tıklamayı deneyin. Mesaj kaybolmalı ve tekrar görünmelidir. Ardından “Remove from the DOM”a tıklayın. Bu onu zorla kaldıracaktır. Son olarak “Toggle with setState”e tıklayın:

DOM elemanını manuel olarak kaldırdıktan sonra tekrar göstermek için setState’i kullanmaya çalışmak tutarsızlığa neden olur. Bunun nedeni DOM’u değiştirmiş olmanız ve React’in bunu doğru bir şekilde yönetmeye nasıl devam edeceğini bilmemesidir.

React tarafından yönetilen DOM elemanlarını değiştirmekten kaçının. React tarafından yönetilen elemanlarda değişiklik yapmak, alt elemanlar eklemek veya elemanları kaldırmak tutarsız görsel sonuçlara veya yukarıdaki gibi tutarsızlıklara neden olabilir.

Ancak bu hiç yapamayacağınız anlamına gelmez. Dikkat gerektirir. React’in güncellemek için bir nedeni olmayan DOM bölümlerini güvenle değiştirebilirsiniz. Örneğin JSX’te bazı <div> elemanları her zaman boşsa React’in alt listesine dokunmak için bir nedeni olmayacaktır. Bu nedenle elemanları buraya manuel olarak eklemek veya kaldırmak güvenlidir.