Update manipulating-the-dom-with-refs.md

changed कंपोनेंट to कौम्पोनॅन्ट
reactjs · Dec 24, 2024 · c24b9f8 · c24b9f8
1 parent cece967
commit c24b9f8
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -12,7 +12,7 @@ React स्वचालित रूप से [DOM](https://developer.mozilla.
 
 - React द्वारा मैनेज किए गए DOM नोड तक `ref` एट्रिब्यूट के साथ कैसे पहुंचें
 - `ref` JSX एट्रिब्यूट का `useRef` हुक से क्या संबंध है
-- किसी दूसरे कंपोनेंट के DOM नोड तक कैसे पहुंचें
+- किसी दूसरे कौम्पोनॅन्ट के DOM नोड तक कैसे पहुंचें
 - किन मामलों में React द्वारा मैनेज किए गए DOM को बदलना सुरक्षित है
 
 </YouWillLearn>
@@ -25,7 +25,7 @@ React द्वारा मैनेज किए गए DOM नोड तक
 import { useRef } from 'react';
 ```
 
-फिर, इसे अपने कंपोनेंट के अंदर एक ref डिक्लेअर करने के लिए उपयोग करें:
+फिर, इसे अपने कौम्पोनॅन्ट के अंदर एक ref डिक्लेअर करने के लिए उपयोग करें:
 
 ```js
 const myRef = useRef(null);
@@ -84,7 +84,7 @@ export default function Form() {
 
 ### उदाहरण: किसी एलिमेंट पर स्क्रॉल करना {/*example-scrolling-to-an-element*/}
 
-एक कंपोनेंट में एक से अधिक रेफ्स हो सकते हैं। इस उदाहरण में, तीन इमेजेस का कैरोसेल है। प्रत्येक बटन एक इमेज को केंद्रित करता है, इसके लिए ब्राउज़र के [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) मेथड को संबंधित DOM नोड पर कॉल किया जाता है:
+एक कौम्पोनॅन्ट में एक से अधिक रेफ्स हो सकते हैं। इस उदाहरण में, तीन इमेजेस का कैरोसेल है। प्रत्येक बटन एक इमेज को केंद्रित करता है, इसके लिए ब्राउज़र के [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) मेथड को संबंधित DOM नोड पर कॉल किया जाता है:
 
 <Sandpack>
 
@@ -207,7 +207,7 @@ li {
 </ul>
 ```
 
-ऐसा इसलिए है क्योंकि **हुक्स को केवल आपके कंपोनेंट के शीर्ष स्तर पर ही कॉल किया जाना चाहिए।** आप `useRef` को किसी लूप, कंडीशन, या `map()` कॉल के अंदर नहीं कॉल कर सकते।
+ऐसा इसलिए है क्योंकि **हुक्स को केवल आपके कौम्पोनॅन्ट के शीर्ष स्तर पर ही कॉल किया जाना चाहिए।** आप `useRef` को किसी लूप, कंडीशन, या `map()` कॉल के अंदर नहीं कॉल कर सकते।
 
 इस समस्या को हल करने का एक तरीका यह है कि उनके पैरेंट एलिमेंट के लिए एक रिफ लें और फिर DOM मैनिपुलेशन विधियों जैसे [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) का उपयोग करके व्यक्तिगत चाइल्ड नोड्स "खोजें"। लेकिन यह तरीका नाजुक है और आपके DOM स्ट्रक्चर के बदलने पर टूट सकता है।
 
@@ -341,13 +341,13 @@ li {
 
 </DeepDive>
 
-## किसी अन्य कंपोनेंट के DOM नोड्स तक पहुंचना {/*accessing-another-components-dom-nodes*/}
+## किसी अन्य कौम्पोनॅन्ट के DOM नोड्स तक पहुंचना {/*accessing-another-components-dom-nodes*/}
 
 <Pitfall>  
-Refs एक अंतिम उपाय हैं। किसी _दूसरे_ कंपोनेंट के DOM नोड्स को मैन्युअली मैनिपुलेट करना आपके कोड को नाजुक बना सकता है।  
+Refs एक अंतिम उपाय हैं। किसी _दूसरे_ कौम्पोनॅन्ट के DOM नोड्स को मैन्युअली मैनिपुलेट करना आपके कोड को नाजुक बना सकता है।  
 </Pitfall>
 
-आप पैरेंट कंपोनेंट से चाइल्ड कौम्पोनॅन्टस तक refs को [किसी अन्य प्रॉप की तरह](/learn/passing-props-to-a-component) पास कर सकते हैं।
+आप पैरेंट कौम्पोनॅन्ट से चाइल्ड कौम्पोनॅन्टस तक refs को [किसी अन्य प्रॉप की तरह](/learn/passing-props-to-a-component) पास कर सकते हैं।
 
 ```js {3-4,9}
 import { useRef } from 'react';
@@ -362,7 +362,7 @@ function MyForm() {
 }
 ```
 
-ऊपर दिए गए उदाहरण में, एक ref पैरेंट कंपोनेंट `MyForm` में बनाया गया है और चाइल्ड कंपोनेंट `MyInput` को पास किया गया है। `MyInput` फिर इस ref को `<input>` को पास करता है। चूंकि `<input>` एक [बिल्ट-इन कंपोनेंट](/reference/react-dom/components/common) है, React ref की `.current` प्रॉपर्टी को `<input>` DOM एलिमेंट पर सेट करता है।
+ऊपर दिए गए उदाहरण में, एक ref पैरेंट कौम्पोनॅन्ट `MyForm` में बनाया गया है और चाइल्ड कौम्पोनॅन्ट `MyInput` को पास किया गया है। `MyInput` फिर इस ref को `<input>` को पास करता है। चूंकि `<input>` एक [बिल्ट-इन कौम्पोनॅन्ट](/reference/react-dom/components/common) है, React ref की `.current` प्रॉपर्टी को `<input>` DOM एलिमेंट पर सेट करता है।
 
 `MyForm` में बनाया गया `inputRef` अब `MyInput` द्वारा रिटर्न किए गए `<input>` DOM एलिमेंट को पॉइंट करता है। `MyForm` में बनाया गया एक क्लिक हैंडलर `inputRef` को एक्सेस कर सकता है और `<input>` पर फोकस सेट करने के लिए `focus()` को कॉल कर सकता है।
 
@@ -399,7 +399,7 @@ export default function MyForm() {
 
 #### API के एक सबसेट को एक इम्पेरेटिव हैंडल के साथ एक्सपोज करना {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
 
-ऊपर दिए गए उदाहरण में, `MyInput` को पास किया गया ref ऑरिजिनल DOM इनपुट एलिमेंट तक पास होता है। यह पैरेंट कंपोनेंट को इस पर `focus()` कॉल करने की अनुमति देता है। हालांकि, इससे पैरेंट कंपोनेंट को कुछ और भी करने की अनुमति मिलती है—उदाहरण के लिए, इसकी CSS स्टाइल्स को बदलना।  
+ऊपर दिए गए उदाहरण में, `MyInput` को पास किया गया ref ऑरिजिनल DOM इनपुट एलिमेंट तक पास होता है। यह पैरेंट कौम्पोनॅन्ट को इस पर `focus()` कॉल करने की अनुमति देता है। हालांकि, इससे पैरेंट कौम्पोनॅन्ट को कुछ और भी करने की अनुमति मिलती है—उदाहरण के लिए, इसकी CSS स्टाइल्स को बदलना।  
 कुछ असामान्य मामलों में, आप एक्सपोज़ की गई कार्यक्षमता को सीमित करना चाह सकते हैं। आप यह [`useImperativeHandle`](/reference/react/useImperativeHandle) का उपयोग करके कर सकते हैं:
 
 <Sandpack>
@@ -436,8 +436,8 @@ export default function Form() {
 
 </Sandpack>
 
-यहां, `MyInput` के अंदर `realInputRef` असली इनपुट DOM नोड को होल्ड करता है। हालांकि, [`useImperativeHandle`](/reference/react/useImperativeHandle) React को निर्देश देता है कि वह पैरेंट कंपोनेंट को एक कस्टम ऑब्जेक्ट को रिफ के रूप में प्रोवाइड करे।  
-इसलिए, `Form` कंपोनेंट के अंदर `inputRef.current` केवल `focus` मेथड तक ही पहुंच प्रदान करेगा। इस मामले में, रिफ "हैंडल" DOM नोड नहीं है, बल्कि वह कस्टम ऑब्जेक्ट है जिसे आप [`useImperativeHandle`](/reference/react/useImperativeHandle) कॉल के अंदर बनाते हैं।  
+यहां, `MyInput` के अंदर `realInputRef` असली इनपुट DOM नोड को होल्ड करता है। हालांकि, [`useImperativeHandle`](/reference/react/useImperativeHandle) React को निर्देश देता है कि वह पैरेंट कौम्पोनॅन्ट को एक कस्टम ऑब्जेक्ट को रिफ के रूप में प्रोवाइड करे।  
+इसलिए, `Form` कौम्पोनॅन्ट के अंदर `inputRef.current` केवल `focus` मेथड तक ही पहुंच प्रदान करेगा। इस मामले में, रिफ "हैंडल" DOM नोड नहीं है, बल्कि वह कस्टम ऑब्जेक्ट है जिसे आप [`useImperativeHandle`](/reference/react/useImperativeHandle) कॉल के अंदर बनाते हैं।  
 
 </DeepDive>  
 
@@ -649,7 +649,7 @@ button {
 - रिफ़्स एक सामान्य अवधारणा हैं, लेकिन सामान्यत: आप इन्हें DOM तत्वों को रखने के लिए उपयोग करेंगे।
 - आप React को `myRef.current` में एक DOM नोड डालने के लिए `<div ref={myRef}>` का उपयोग करके निर्देशित करते हैं।
 - सामान्यत: आप रिफ़्स का उपयोग गैर-हानिकारक क्रियाओं के लिए करेंगे जैसे कि फोकस करना, स्क्रॉल करना, या DOM तत्वों का मापना।
-- एक कंपोनेंट डिफ़ॉल्ट रूप से अपने DOM नोड्स को एक्सपोज़ नहीं करता। आप `forwardRef` का उपयोग करके और दूसरे `ref` तर्क को एक विशिष्ट नोड तक भेजकर DOM नोड को एक्सपोज़ करने का विकल्प चुन सकते हैं।
+- एक कौम्पोनॅन्ट डिफ़ॉल्ट रूप से अपने DOM नोड्स को एक्सपोज़ नहीं करता। आप `forwardRef` का उपयोग करके और दूसरे `ref` तर्क को एक विशिष्ट नोड तक भेजकर DOM नोड को एक्सपोज़ करने का विकल्प चुन सकते हैं।
 - React द्वारा प्रबंधित DOM नोड्स को बदलने से बचें।
 - यदि आप React द्वारा प्रबंधित DOM नोड्स को बदलते हैं, तो केवल उन हिस्सों को बदलें जिन्हें React अपडेट करने का कोई कारण नहीं है।