You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: beta/src/pages/learn/conditional-rendering.md
+10-10
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: कंडीशनल रेंडरिंग
4
4
5
5
<Intro>
6
6
7
-
आपके कौम्पोनॅन्ट को अक्सर अलग-अलग स्थितियों के आधार पर अलग-अलग चीजें डिस्प्ले करने की आवश्यकता होगी। React में, आप JSX को किसी कंडीशन के साथ JavaScript सिंटेक्स जैसे की `if` स्टेटमेंट्स, `&&`, एंड `?:` ऑपरेटर्स को इस्तेमाल करके रेंडर कर सकते है।
7
+
आपके कौम्पोनॅन्ट को अक्सर अलग-अलग कंडीशंस के आधार पर अलग-अलग चीजें डिस्प्ले करने की आवश्यकता होगी। React में, आप JSX को किसी कंडीशन के साथ JavaScript सिंटेक्स जैसे की `if` स्टेटमेंट्स, `&&`, एंड `?:` ऑपरेटर्स को इस्तेमाल करके रेंडर कर सकते है।
8
8
9
9
</Intro>
10
10
@@ -106,7 +106,7 @@ export default function PackingList() {
106
106
107
107
### `null` के साथ कंडीशन के आधार पर कुछ कुछ नहीं रिटर्न करना {/*conditionally-returning-nothing-with-null*/}
108
108
109
-
कुछ स्थितियों में, आप कुछ भी रेंडर नहीं करना चाहेंगे। उदाहरण के लिए, मान लें कि आप पैक्ड आइटम बिल्कुल नहीं दिखाना चाहते हैं। लेकिन एक कौम्पोनॅन्ट को तो कुछ न कुछ रिटर्न करना होग। इस केस में, आप `null` रिटर्न कर सकते हैं:
109
+
कुछ कंडीशंस में, आप कुछ भी रेंडर नहीं करना चाहेंगे। उदाहरण के लिए, मान लें कि आप पैक्ड आइटम बिल्कुल नहीं दिखाना चाहते हैं। लेकिन एक कौम्पोनॅन्ट को तो कुछ न कुछ रिटर्न करना होग। इस केस में, आप `null` रिटर्न कर सकते हैं:
110
110
111
111
```js
112
112
if (isPacked) {
@@ -255,7 +255,7 @@ export default function PackingList() {
255
255
256
256
</Sandpack>
257
257
258
-
यह तरीका साधारण परिस्थितियों के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड कंडीशनल मार्कअप के साथ कीच-पिच हो जाते हैं, तो चीजों को साफ करने के लिए चाइल्ड कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप काम्प्लेक्स एक्सप्रेशंस को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं।
258
+
यह तरीका साधारण परिकंडीशंस के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड कंडीशनल मार्कअप के साथ कीच-पिच हो जाते हैं, तो चीजों को साफ करने के लिए चाइल्ड कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप काम्प्लेक्स एक्सप्रेशंस को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं।
259
259
260
260
### लॉजिकल AND ऑपरेटर (`&&`) {/*logical-and-operator-*/}
261
261
@@ -454,7 +454,7 @@ export default function PackingList() {
454
454
455
455
### अधूरे आइटम के लिए `? :` के साथ एक आइकन दिखाएं {/*show-an-icon-for-incomplete-items-with--*/}
456
456
457
-
एक ❌ रेंडर करने के लिए कंडीशनल ऑपरेटर (`cond ? a : b`) का इस्तेमाल करें अगर `isPacked` `true` नहीं है।
457
+
अगर `isPacked` `true` नहीं है तो एक ❌ रेंडर करने के लिए कंडीशनल ऑपरेटर (`cond ? a : b`) का इस्तेमाल करें।
458
458
459
459
<Sandpack>
460
460
@@ -532,15 +532,15 @@ export default function PackingList() {
532
532
533
533
</Solution>
534
534
535
-
### आइटम का इम्पोर्टेंस `&&` के साथ दिखाएं {/*show-the-item-importance-with-*/}
535
+
### आइटम की अहमियत `&&` के साथ दिखाएं {/*show-the-item-importance-with-*/}
536
536
537
-
इस उदाहरण में, प्रत्येक `Item` को एक संख्यात्मक `importance` prop प्राप्त होता है। इटैलिक में "_(Importance: X)_" रेंडर करने के लिए `&&` ऑपरेटर का उपयोग करें, लेकिन केवल उन आइटम्स के लिए जिनमें गैर-शून्य कठिनाई है। आपकी आइटम सूची इस तरह दिखनी चाहिए:
537
+
इस उदाहरण में, प्रत्येक `Item` को एक संख्यात्मक `importance` prop मिलता है। इटैलिक में "_(Importance: X)_" रेंडर करने के लिए `&&` ऑपरेटर का उपयोग करें, लेकिन केवल उन आइटम्स के लिए जिनमें गैर-शून्य कठिनाई है। आपकी आइटम सूची इस तरह दिखनी चाहिए:
538
538
539
539
* Space suit _(Importance: 9)_
540
540
* Helmet with a golden leaf
541
541
* Photo of Tam _(Importance: 6)_
542
542
543
-
दो लेबलों के बीच एक स्पेस जोड़ना न भूलें!
543
+
दो लेबल्स के बीच एक स्पेस जोड़ना न भूलें!
544
544
545
545
<Sandpack>
546
546
@@ -624,7 +624,7 @@ export default function PackingList() {
624
624
625
625
ध्यान दें कि आपको `importance && ...` के बजाय `importance > 0 && ...` लिखना होगा ताकि अगर `importance` `0` हो, तो `0` परिणाम के रूप में रेंडर नहीं हो!
626
626
627
-
इस समाधान में, नाम और इम्पोर्टेंस लेबल के बीच एक स्पेस डालने के लिए दो अलग-अलग कंडीशंस का उपयोग किया गया है। वैकल्पिक रूप से, आप एक प्रमुख स्पेस के साथ एक फ्रेगमेंट का उपयोग कर सकते हैं: `importance > 0 && <> <i>...</i></>` या `<i>` के अंदर तुरंत एक स्पेस जोड़ें: `importance > 0 && <i> ...</i>`।
627
+
इस समाधान में, नाम और importance लेबल के बीच एक स्पेस डालने के लिए दो अलग-अलग कंडीशंस का उपयोग किया गया है। इसके अलावा, आप एक प्रमुख स्पेस के साथ एक फ्रेगमेंट का उपयोग भी कर सकते हैं: `importance > 0 && <> <i>...</i></>` या `<i>` के अंदर शुरुआत में ही एक स्पेस जोड़ें: `importance > 0 && <i> ...</i>`।
628
628
629
629
</Solution>
630
630
@@ -710,9 +710,9 @@ export default function DrinkList() {
710
710
711
711
</Sandpack>
712
712
713
-
यहां प्रत्येक ड्रिंक के बारे में जानकारी को कई स्थितियों में फैलाने के बजाय एक साथ समूहीकृत किया जाता है। इससे भविष्य में और ड्रिंक जोड़ना आसान हो जाता है।
713
+
यहां प्रत्येक ड्रिंक के बारे में जानकारी को कई कंडीशंस में फैलाने के बजाय एक साथ ग्रुप किया जाता है। इससे भविष्य में और ड्रिंक ऐड करना आसान हो जाता है।
714
714
715
-
एक अन्य उपाय यह होगा कि जानकारी को ऑब्जेक्ट्स में स्थानांतरित करके कंडीशन को पूरी तरह से हटा दिया जाए:
715
+
एक अन्य उपाय यह होगा कि जानकारी को ऑब्जेक्ट्स में मूव करके कंडीशन को पूरी तरह से हटा दिया जाए:
0 commit comments