Refs के साथ DOM में बदलाव करना

नोड के लिए ref प्राप्त करना

React द्वारा मैनेज किए गए DOM नोड तक पहुंचने के लिए, सबसे पहले useRef हुक को इम्पोर्ट करें:

import { useRef } from 'react';

फिर, इसे अपने कौम्पोनॅन्ट के अंदर एक ref डिक्लेअर करने के लिए उपयोग करें:

const myRef = useRef(null);

अंत में, अपने ref को उस JSX टैग के ref एट्रिब्यूट के रूप में पास करें जिसके लिए आप DOM नोड प्राप्त करना चाहते हैं:

<div ref={myRef}>

useRef हुक एक ऑब्जेक्ट रिटर्न करता है जिसमें एकमात्र प्रॉपर्टी होती है, जिसे current कहा जाता है। शुरुआत में, myRef.current का मान null होगा। जब React इस <div> के लिए एक DOM नोड बनाएगा, तो React इस नोड का रेफरेंस myRef.current में डाल देगा। इसके बाद आप इस DOM नोड को अपने इवेंट हैंडलर्स से एक्सेस कर सकते हैं और उसकी बिल्ट-इन ब्राउज़र APIs का उपयोग कर सकते हैं।

// आप किसी भी ब्राउज़र API का उपयोग कर सकते हैं, उदाहरण के लिए:
myRef.current.scrollIntoView();

उदाहरण: टेक्स्ट इनपुट पर फोकस करना

इस उदाहरण में, बटन पर क्लिक करने से इनपुट पर फोकस होगा:

इसका उपयोग करने के लिए:

1. useRef हुक के साथ inputRef डिक्लेअर करें।
2. इसे <input ref={inputRef}> के रूप में पास करें। यह React को यह बताता है कि इस <input> के DOM नोड को inputRef.current में डालें।
3. handleClick फंक्शन में, इनपुट DOM नोड को inputRef.current से पढ़ें और focus() को inputRef.current.focus() के साथ कॉल करें।
4. handleClick इवेंट हैंडलर को <button> में onClick के साथ पास करें।

हालांकि DOM मैनिपुलेशन रेफ्स के लिए सबसे आम उपयोग है, useRef हुक का उपयोग React के बाहर अन्य चीजों, जैसे टाइमर IDs, को स्टोर करने के लिए भी किया जा सकता है। स्टेट की तरह, रेफ्स रेंडर के बीच बने रहते हैं। रेफ्स स्टेट वेरिएबल्स की तरह हैं, लेकिन इन्हें सेट करने पर री-रेंडर नहीं होता। रेफ्स के बारे में अधिक जानने के लिए पढ़ें Referencing Values with Refs.

उदाहरण: किसी एलिमेंट पर स्क्रॉल करना

एक कौम्पोनॅन्ट में एक से अधिक रेफ्स हो सकते हैं। इस उदाहरण में, तीन इमेजेस का कैरोसेल है। प्रत्येक बटन एक इमेज को केंद्रित करता है, इसके लिए ब्राउज़र के scrollIntoView() मेथड को संबंधित DOM नोड पर कॉल किया जाता है:

<ul>
  {items.map((item) => {
    // काम नहीं करेगा!
    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 को इनिशियलाइज़ करें।
      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();
                map.set(cat, node);

                return () => {
                  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();
    // Map में जोड़ें
    map.set(cat, node);

    return () => {
      // Map से हटाएं
      map.delete(cat);
    };
  }}
>

किसी अन्य कौम्पोनॅन्ट के DOM नोड्स तक पहुंचना

आप पैरेंट कौम्पोनॅन्ट से चाइल्ड कौम्पोनॅन्टस तक refs को किसी अन्य प्रॉप की तरह पास कर सकते हैं।

import { useRef } from 'react';

function MyInput({ ref }) {
  return <input ref={ref} />;
}

function MyForm() {
  const inputRef = useRef(null);
  return <MyInput ref={inputRef} />;
}

ऊपर दिए गए उदाहरण में, एक ref पैरेंट कौम्पोनॅन्ट MyForm में बनाया गया है और चाइल्ड कौम्पोनॅन्ट MyInput को पास किया गया है। MyInput फिर इस ref को <input> को पास करता है। चूंकि <input> एक बिल्ट-इन कौम्पोनॅन्ट है, React ref की .current प्रॉपर्टी को <input> DOM एलिमेंट पर सेट करता है।

MyForm में बनाया गया inputRef अब MyInput द्वारा रिटर्न किए गए <input> DOM एलिमेंट को पॉइंट करता है। MyForm में बनाया गया एक क्लिक हैंडलर inputRef को एक्सेस कर सकता है और <input> पर फोकस सेट करने के लिए focus() को कॉल कर सकता है।

import { useRef, useImperativeHandle } from "react";

function MyInput({ ref }) {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    // केवल focus को एक्सपोज करें और कुछ नहीं
    focus() {
      realInputRef.current.focus();
    },
  }));
  return <input 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 रेफ्स को जोड़ता है

React में, प्रत्येक अपडेट दो चरणों में बाँटा जाता है:

• रेंडर के दौरान, React आपके कौम्पोनॅन्टस को कॉल करता है ताकि यह पता लगा सके कि स्क्रीन पर क्या दिखना चाहिए।
• कमीट के दौरान, React DOM में बदलाव लागू करता है।

सामान्यतः, आप रेंडर के दौरान रेफ्स तक पहुँचने की कोशिश नहीं करना चाहते हैं। यह उन रेफ्स के लिए भी जाता है जो DOM नोड्स को होल्ड करते हैं। पहले रेंडर के दौरान, DOM नोड्स अभी तक बनाए नहीं गए होते हैं, इसलिए ref.current null होगा। और अपडेट के दौरान रेंडर करते समय, DOM नोड्स अभी तक अपडेट नहीं हुए होते हैं। इसलिए, उन्हें पढ़ने के लिए यह बहुत जल्दी होता है।

React ref.current को कमीट के दौरान सेट करता है। DOM को अपडेट करने से पहले, React प्रभावित ref.current मानों को null पर सेट करता है। DOM को अपडेट करने के बाद, React इन्हें तुरंत संबंधित DOM नोड्स पर सेट कर देता है।

आमतौर पर, आप रेफ्स तक पहुँचने के लिए इवेंट हैंडलर्स का उपयोग करेंगे। अगर आप किसी रेफ के साथ कुछ करना चाहते हैं, लेकिन ऐसा कोई विशेष इवेंट नहीं है जिसमें इसे करना हो, तो आपको एक Effect की आवश्यकता हो सकती है। हम अगले पृष्ठों पर Effects के बारे में चर्चा करेंगे।

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)
  });
}

DOM मैनिपुलेशन के लिए सर्वोत्तम प्रथाएँ

Refs एक “escape hatch” हैं। आपको इन्हें केवल तब उपयोग करना चाहिए जब आपको “React से बाहर कदम रखना हो”। इसके सामान्य उदाहरणों में फोकस, स्क्रॉल पोजीशन को मैनेज करना, या उन ब्राउज़र APIs को कॉल करना शामिल है जिन्हें React एक्सपोज़ नहीं करता।

अगर आप नष्ट न करने वाली क्रियाएँ जैसे कि फोकस करना और स्क्रॉल करना करते हैं, तो आपको कोई समस्या नहीं होनी चाहिए। हालांकि, अगर आप DOM को मैन्युअली संशोधित करने की कोशिश करते हैं, तो आप React द्वारा किए जा रहे परिवर्तनों से टकरा सकते हैं।

इस समस्या को स्पष्ट करने के लिए, इस उदाहरण में एक स्वागत संदेश और दो बटन हैं। पहला बटन अपनी उपस्थिति को conditional rendering और state का उपयोग करके टॉगल करता है, जैसा कि आप सामान्य रूप से React में करते हैं। दूसरा बटन remove() DOM API का उपयोग करके इसे React के नियंत्रण से बाहर मजबूरी से हटा देता है।

“Toggle with setState” को कुछ बार दबाने का प्रयास करें। संदेश को गायब और फिर से दिखाई देना चाहिए। फिर “Remove from the DOM” दबाएँ। यह इसे मजबूरी से हटा देगा। अंत में, “Toggle with setState” दबाएँ:

एक बार जब आपने मैन्युअली DOM तत्व को हटा दिया, तो setState का उपयोग करके उसे फिर से दिखाने की कोशिश करने से क्रैश हो जाएगा। इसका कारण यह है कि आपने DOM को बदल दिया है, और React को यह नहीं पता होता कि इसे सही तरीके से कैसे प्रबंधित किया जाए।

React द्वारा प्रबंधित DOM नोड्स को बदलने से बचें। ऐसे तत्वों से बच्चों को संशोधित करना, जोड़ना, या हटाना जो React द्वारा प्रबंधित हैं, असंगत दृश्य परिणामों या ऊपर दिए गए जैसे क्रैश का कारण बन सकता है।

हालाँकि, इसका मतलब यह नहीं है कि आप इसे बिलकुल भी नहीं कर सकते। यह सतर्कता की आवश्यकता होती है। आप उन DOM भागों को सुरक्षित रूप से संशोधित कर सकते हैं जिन्हें React को अपडेट करने का कोई कारण नहीं होता। उदाहरण के लिए, यदि कोई <div> JSX में हमेशा खाली है, तो React को इसके बच्चों की सूची को छेड़ने का कोई कारण नहीं होगा। इसलिए, वहां तत्वों को मैन्युअली जोड़ना या हटाना सुरक्षित है।