Skip to content

Commit 730d233

Browse files
committed
Translated Lists-and-Keys page
1 parent 5571a84 commit 730d233

File tree

1 file changed

+41
-40
lines changed

1 file changed

+41
-40
lines changed

content/docs/lists-and-keys.md

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,25 @@ prev: conditional-rendering.html
66
next: forms.html
77
---
88

9-
First, let's review how you transform lists in JavaScript.
9+
पहले, आइए समीक्षा करें कि आप जावास्क्रिप्ट में लिस्ट्स को कैसे बदलते हैं।
1010

11-
Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
11+
12+
नीचे दिए गए कोड में हम `numbers` की एक array लेने और उनके मूल्यों को दोगुना करने के लिए मैप फ़ंक्शन का उपयोग करते हैं। हम मैप द्वारा दिए गए नए array को `double` नाम के वेरिएबल को सौपते हैं और फिर लॉग करते हैं।
1213

1314
```javascript{2}
1415
const numbers = [1, 2, 3, 4, 5];
1516
const doubled = numbers.map((number) => number * 2);
1617
console.log(doubled);
1718
```
19+
यह कोड [2, 4, 6, 8, 10] को कंसोल पर लोग कर देगा।
1820

19-
This code logs `[2, 4, 6, 8, 10]` to the console.
20-
21-
In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
21+
रियेक्ट में,array को लिस्ट ऑफ़ [एलिमेंट्स](/docs/rendering-elements.html) में बदलना लगभग समान है।
2222

23-
### Rendering Multiple Components {#rendering-multiple-components}
23+
### कई कौम्पोनॅन्ट का की रेंडरिंग {# कई कौम्पोनॅन्ट का की रेंडरिंग }
2424

25-
You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
25+
आप एलिमेंट्स का संग्रह बना सकते हैं और कर्ली ब्रेसिज़ `{}` का उपयोग करके [उन्हें Jsx में शामिल करें](/docs/introducing-jsx.html#embedding-expressions-in-jsx)
2626

27-
Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
27+
हमने जावास्क्रिप्ट [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) फंक्शन का उपयोग करके `numbers` नाम की array में लूप लगाया है। हमने प्रत्येक आइटम के लिए `<li>` एलिमेंट को रिटर्न किया है। अंत में, हम परिणामस्वरूप आयी हुई एलिमेंट्स की array को `listItems` को सौपते है।
2828

2929
```javascript{2-4}
3030
const numbers = [1, 2, 3, 4, 5];
@@ -33,7 +33,7 @@ const listItems = numbers.map((number) =>
3333
);
3434
```
3535

36-
We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
36+
पुरे `listItems` ऐरे को `<ul>` एलिमेंट में शामिल करके इसे [DOM को रेंडर करे](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
3737

3838
```javascript{2}
3939
ReactDOM.render(
@@ -42,15 +42,15 @@ ReactDOM.render(
4242
);
4343
```
4444

45-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
45+
[**कोडपेन पर इसे आजमाएं**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
4646

47-
This code displays a bullet list of numbers between 1 and 5.
47+
यह कोड 1 से 5 के बीच संख्याओं की एक बुलेट लिस्ट प्रदर्शित करता है।
4848

49-
### Basic List Component {#basic-list-component}
49+
###मूल लिस्टस कौम्पोनॅन्ट{#मूल लिस्टस कौम्पोनॅन्ट}
5050

51-
Usually you would render lists inside a [component](/docs/components-and-props.html).
51+
आमतौर पर आप एक [कौम्पोनॅन्ट](/docs/components-and-props.html) के अंदर लिस्ट प्रस्तुत करेंगे।
5252

53-
We can refactor the previous example into a component that accepts an array of `numbers` and outputs a list of elements.
53+
हम पिछले उदाहरण को एक कौम्पोनॅन्ट में बदल सकते हैं जो `numbers ` की एक array को स्वीकार करता है और एलिमेंटस की लिस्ट को आउटपुट करता है।
5454

5555
```javascript{3-5,7,13}
5656
function NumberList(props) {
@@ -70,9 +70,10 @@ ReactDOM.render(
7070
);
7171
```
7272

73-
When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
73+
जब आप यह कोड चलाते हैं, तो आपको एक चेतावनी दी जाती है कि लिस्ट आइटम के लिए एक key प्रदान की जानी चाहिए। "key" एक विशेष स्ट्रिंग विशेषता है जिसे आपको
74+
एलिमेंटस की सूची बनाते समय शामिल करने की आवश्यकता होती है। हम चर्चा करेंगे अगले भाग में कि यह महत्वपूर्ण क्यों है।
7475

75-
Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
76+
आइए `numbers.map() ` के अंदर हमारी लिस्ट आइटम की एक `key`असाइन करें और लापता key की समस्या को ठीक करें।
7677

7778
```javascript{4}
7879
function NumberList(props) {
@@ -94,11 +95,11 @@ ReactDOM.render(
9495
);
9596
```
9697

97-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
98+
[**कोडपेन पर इसे आजमाएं**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
9899

99-
## Keys {#keys}
100+
## Keys{#Keys}
100101

101-
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
102+
Keys प्रतिक्रिया को पहचानने में मदद करती हैं कि कौन से आइटम बदले गए हैं, जोड़े गए हैं, या हटा दिए गए हैं। एलिमेंटस को स्थिर पहचान देने के लिए array के अंदर तत्वों को key दी जानी चाहिए:
102103

103104
```js{3}
104105
const numbers = [1, 2, 3, 4, 5];
@@ -109,7 +110,7 @@ const listItems = numbers.map((number) =>
109110
);
110111
```
111112

112-
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
113+
key चुनने का सबसे अच्छा तरीका एक स्ट्रिंग का उपयोग करना है जो विशिष्ट रूप से अपने भाई-बहनों के बीच एक लिस्ट आइटम की पहचान करता है। अक्सर आप चाबी के रूप में अपने डेटा से आईडी का उपयोग करेंगे:
113114

114115
```js{2}
115116
const todoItems = todos.map((todo) =>
@@ -119,7 +120,7 @@ const todoItems = todos.map((todo) =>
119120
);
120121
```
121122

122-
When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
123+
जब आपके पास प्रदान की गई वस्तुओं के लिए स्थिर आईडी नहीं है, तो आप अंतिम उपाय के रूप में key के रूप में आइटम इंडेक्स का उपयोग कर सकते हैं:
123124

124125
```js{2,3}
125126
const todoItems = todos.map((todo, index) =>
@@ -130,17 +131,16 @@ const todoItems = todos.map((todo, index) =>
130131
);
131132
```
132133

133-
We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
134-
135-
Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
134+
यदि आइटम का क्रम बदल सकता है तो हम key के लिए इंडेक्स का उपयोग करने की अनुशंसा नहीं करते हैं। यह प्रदर्शन को नकारात्मक रूप से प्रभावित कर सकता है और कौम्पोनॅन्ट की अवस्था के साथ समस्या पैदा कर सकता है। [इंडेक्स को key के रूप में उपयोग करने के नकारात्मक प्रभावों](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). पर गहन व्याख्या के लिए रॉबिन पोकोर्न के लेख को देखें। यदि आप आइटमों को सूचीबद्ध करने के लिए एक स्पष्ट key निर्दिष्ट नहीं करने का विकल्प चुनते हैं तो रिएक्ट key के रूप में इंडेक्स का उपयोग करने के लिए डिफ़ॉल्ट होगा।
136135

137-
### Extracting Components with Keys {#extracting-components-with-keys}
136+
यदि आप अधिक सीखने में रुचि रखते हैं, [तो key क्यों आवश्यक है](/docs/reconciliation.html#recursing-on-children) , इस बारे में गहराई से व्याख्या की गई है।
137+
###key के साथ कौम्पोनॅन्ट निकालना{#key के साथ कौम्पोनॅन्ट निकालना}
138138

139-
Keys only make sense in the context of the surrounding array.
139+
keys केवल आस-पास के array के संदर्भ में समझ में आती हैं।
140140

141-
For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the `<li>` element in the `ListItem` itself.
141+
उदाहरण के लिए, यदि आप एक ListItem कौम्पोनॅन्ट को [निकालते](/docs/components-and-props.html#extracting-components) हैं,तो आपको key array के `<ListItem />` एलिमेंट पर रखनी चाहिए बजाये खुद `ListItem` के `<li>` एलिमेंट पर रखने के।
142142

143-
**Example: Incorrect Key Usage**
143+
**उदाहरण: गलत key का उपयोग**
144144

145145
```javascript{4,5,14,15}
146146
function ListItem(props) {
@@ -173,7 +173,7 @@ ReactDOM.render(
173173
);
174174
```
175175

176-
**Example: Correct Key Usage**
176+
**उदाहरण:key का सही उपयोग**
177177

178178
```javascript{2,3,9,10}
179179
function ListItem(props) {
@@ -202,13 +202,13 @@ ReactDOM.render(
202202
);
203203
```
204204

205-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
205+
[**कोडपेन पर इसे आजमाएं**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
206206

207-
A good rule of thumb is that elements inside the `map()` call need keys.
207+
एक अच्छा नियम यह है कि एलिमेंटस को `map()` कॉल के समय पर key की जरुरत पड़ती है।
208208

209-
### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
209+
### keys सिर्फ़ भाई-बहनों के बीच अद्वितीय होनी चाहिए{#कीज़ सिर्फ़ भाई-बहनों के बीच अद्वितीय होनी चाहिए}
210210

211-
Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
211+
arrays के भीतर उपयोग की जाने वाली key उनके भाई-बहनों के बीच अद्वितीय होनी चाहिए। हालाँकि उन्हें विश्व स्तर पर अद्वितीय होने की आवश्यकता नहीं है। जब हम दो अलग-अलग arrays का उत्पादन करते हैं, तो हम उसी key का उपयोग कर सकते हैं
212212

213213
```js{2,5,11,12,19,21}
214214
function Blog(props) {
@@ -246,9 +246,9 @@ ReactDOM.render(
246246
);
247247
```
248248

249-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
249+
[**CodePen पर इसे आज़माएं**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
250250

251-
Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
251+
keys रियेक्ट के लिए संकेत के रूप में काम करती हैं लेकिन वे आपके कौम्पोनॅन्टस को पास नहीं की जाती हैं। यदि आपको अपने कौम्पोनॅन्ट में समान मूल्य की आवश्यकता है,तो इसे अलग नाम के साथ prop के रूप में स्पष्ट रूप से पास करें:
252252

253253
```js{3,4}
254254
const content = posts.map((post) =>
@@ -259,11 +259,11 @@ const content = posts.map((post) =>
259259
);
260260
```
261261

262-
With the example above, the `Post` component can read `props.id`, but not `props.key`.
262+
ऊपर के उदाहरण के साथ,`Post` कौम्पोनॅन्ट `props.id` पढ़ सकता है, लेकिन `props.key` नहीं।
263263

264-
### Embedding map() in JSX {#embedding-map-in-jsx}
264+
### JSX में मैप की एम्बेडिंग {#JSX में मैप की एम्बेडिंग}
265265

266-
In the examples above we declared a separate `listItems` variable and included it in JSX:
266+
ऊपर दिए गए उदाहरणों में हमने एक अलग `listItems` वेरिएबल को घोषित किया था और इसे JSX में शामिल किया था:
267267

268268
```js{3-6}
269269
function NumberList(props) {
@@ -281,6 +281,7 @@ function NumberList(props) {
281281
```
282282

283283
JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
284+
JSX कर्ली ब्रेसिज़ में किसी भी एक्सप्रेशन को एम्बेडिंग करने की अनुमति देता है ताकि हम `map()` के परिणाम को इनलाइन कर सकें:
284285

285286
```js{5-8}
286287
function NumberList(props) {
@@ -296,6 +297,6 @@ function NumberList(props) {
296297
}
297298
```
298299

299-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
300+
[**CodePen पर इसे आज़माएं**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
300301

301-
Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
302+
कभी-कभी इसका परिणाम स्पष्ट कोड होता है, लेकिन इस शैली का दुरुपयोग भी किया जा सकता है। जावास्क्रिप्ट की तरह, यह आपको तय करना है कि यह पठनीयता के लिए एक चर निकालने के लायक है या नहीं। ध्यान रखें कि यदि `map()` बॉडी बहुत नेस्टेड है, तो [कंपोनेंट निकालने](/docs/components-and-props.html#extracting-components).का अच्छा समय हो सकता है।

0 commit comments

Comments
 (0)