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: src/content/reference/react/Children.md
+36-36Lines changed: 36 additions & 36 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -120,21 +120,21 @@ function RowList({ children }) {
120
120
121
121
#### Parameters {/*children-map-parameters*/}
122
122
123
-
* `children`: Bileşeniniz tarafından alınan [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) değeri.
124
-
* `fn`: The mapping function, similar to the [array `map`method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) callback. It will be called with the child as the first argument and its index as the second argument. The index starts at `0` and increments on each call. You need to return a React node from this function. This may be an empty node (`null`, `undefined`, or a Boolean), a string, a number, a React element, or an array of other React nodes.
125
-
* **optional** `thisArg`: The [`this`value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) with which the `fn` function should be called. If omitted, it's `undefined`.
123
+
* `children`: Bileşeniniz tarafından alınan [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) değeri.
124
+
* `fn`: [array `map`metodu](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) callback’ine benzer eşleme fonksiyonu. İlk argüman olarak child’ı, ikinci argüman olarak indeksini alır. İndeks `0`’dan başlar ve her çağrıda artar. Bu fonksiyondan bir React node döndürmeniz gerekir. Bu; boş bir node (`null`, `undefined` veya Boolean), bir string, bir number, bir React elementi ya da diğer React node’larından oluşan bir array olabilir.
125
+
* **optional** `thisArg`: `fn` fonksiyonunun çağrılacağı [`this`değeri](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this). Eğer verilmezse `undefined` olur.
126
126
127
127
#### Returns {/*children-map-returns*/}
128
128
129
-
If`children`is `null`or`undefined`, returns the same value.
129
+
Eğer`children``null`veya`undefined` ise, aynı değeri döndürür.
130
130
131
-
Otherwise, returns a flat array consisting of the nodes you've returned from the `fn`function. The returned array will contain all nodes you returned except for `null`and`undefined`.
131
+
Aksi takdirde, `fn`fonksiyonundan döndürdüğünüz node’lardan oluşan düz (flat) bir array döndürür. Dönen array, `null`ve`undefined` hariç tüm döndürdüğünüz node’ları içerir.
132
132
133
-
#### Caveats {/*children-map-caveats*/}
133
+
#### Uyarılar {/*children-map-caveats*/}
134
134
135
-
- Empty nodes (`null`, `undefined`, and Booleans), strings, numbers, and [React elements](/reference/react/createElement) count as individual nodes. Arrays don't count as individual nodes, but their children do. **The traversal does not go deeper than React elements:** they don't get rendered, and their children aren't traversed. [Fragments](/reference/react/Fragment) don't get traversed.
135
+
- Boş node’lar (`null`, `undefined` ve Boolean’lar), string’ler, number’lar ve [React elementleri](/reference/react/createElement) ayrı birer node olarak sayılır. Array’ler tekil node olarak sayılmaz, ancak içlerindeki çocuklar sayılır. **Traversal (gezme) React elementlerinin ötesine geçmez:** render edilmezler ve içlerindeki çocuklar da traverse edilmez. [Fragments](/reference/react/Fragment) da traverse edilmez.
136
136
137
-
- If you return an element or an array of elements with keys from `fn`, **the returned elements' keys will be automatically combined with the key of the corresponding original item from `children`.** When you return multiple elements from `fn`in an array, their keys only need to be unique locally amongst each other.
137
+
- `fn` fonksiyonundan key’li bir element veya element array’i döndürürseniz, **döndürülen elementlerin key’leri, `children` içindeki karşılık gelen orijinal item’ın key’i ile otomatik olarak birleştirilir.** `fn`içinden birden fazla elementi array olarak döndürdüğünüzde, bu elementlerin key’lerinin yalnızca kendi aralarında lokal olarak benzersiz olması yeterlidir.
138
138
139
139
---
140
140
@@ -224,7 +224,7 @@ Yukarıdaki örnekte, `RowList` aldığı her children'ı bir `<div className=
224
224
</RowList>
225
225
```
226
226
227
-
Then, with the `RowList`implementation above, the final rendered result will look like this:
227
+
Daha sonra, yukarıdaki `RowList`implementasyonu ile birlikte, son render edilmiş sonuç şu şekilde görünecektir:
228
228
229
229
```js
230
230
<div className="RowList">
@@ -240,7 +240,7 @@ Then, with the `RowList` implementation above, the final rendered result will lo
240
240
</div>
241
241
```
242
242
243
-
`Children.map` is similar to [to transforming arrays with`map()`.](/learn/rendering-lists) The difference is that the `children`data structure is considered *opaque.* This means that even if it's sometimes an array, you should not assume it's an array or any other particular data type. This is why you should use `Children.map`if you need to transform it.
243
+
`Children.map`, [array’leri `map()` ile dönüştürmeye](/learn/rendering-lists) benzer. Aradaki fark, `children`veri yapısının *opaque (şeffaf olmayan)* olarak kabul edilmesidir. Bu, bazen bir array olsa bile onun bir array ya da başka bir veri tipi olduğunu varsaymamanız gerektiği anlamına gelir. Bu yüzden, `children` üzerinde dönüşüm yapmanız gerekiyorsa `Children.map`kullanmalısınız.
244
244
245
245
<Sandpack>
246
246
@@ -293,24 +293,24 @@ export default function RowList({ children }) {
293
293
294
294
<DeepDive>
295
295
296
-
#### Why is the children prop not always an array? {/*why-is-the-children-prop-not-always-an-array*/}
296
+
#### `children` prop neden her zaman bir array değildir? {/*why-is-the-children-prop-not-always-an-array*/}
297
297
298
-
In React, the `children` prop is considered an *opaque*data structure. This means that you shouldn't rely on how it is structured. To transform, filter, or count children, you should use the `Children` methods.
298
+
React’te `children` prop’u *opaque*(şeffaf olmayan) bir veri yapısı olarak kabul edilir. Bu, onun nasıl yapılandırıldığına güvenmemeniz gerektiği anlamına gelir. `children` üzerinde transform, filtreleme veya sayma işlemleri yapmak için`Children`metodlarını kullanmalısınız.
299
299
300
-
In practice, the `children` data structure is often represented as an array internally. However, if there is only a single child, then React won't create an extra array since this would lead to unnecessary memory overhead. As long as you use the`Children`methods instead of directly introspecting the `children` prop, your code will not break even ifReact changes how the data structure is actually implemented.
300
+
Pratikte `children`veri yapısı çoğu zaman içeride bir array olarak temsil edilir. Ancak yalnızca tek bir child varsa, React ekstra bir array oluşturmaz; çünkü bu gereksiz bellek kullanımına yol açar. Siz`children`’ın yapısına doğrudan erişmek yerine`Children`metodlarını kullandığınız sürece, React’in iç implementasyonu değişse bile kodunuz bozulmaz.
301
301
302
-
Even when `children`is an array, `Children.map`has useful special behavior. For example, `Children.map` combines the [keys](/learn/rendering-lists#keeping-list-items-in-order-with-key) on the returned elements with the keys on the `children`you've passed to it. This ensures the original JSX children don't "lose" keys even if they get wrapped like in the example above.
302
+
`children`bir array olsa bile `Children.map`bazı özel davranışlar sunar. Örneğin`Children.map`, dönen elementlerin [key](/learn/rendering-lists#keeping-list-items-in-order-with-key) değerlerini, verilen `children`içindeki key’lerle birleştirir. Bu sayede, JSX children’lar wrapper’lara sarılsa bile orijinal key’lerini “kaybetmez”.
303
303
304
304
</DeepDive>
305
305
306
306
<Pitfall>
307
307
308
-
The `children`data structure **does not include rendered output**of the components you pass as JSX. In the example below, the `children` received by the `RowList` only contains two items rather than three:
308
+
`children`veri yapısı, JSX olarak geçirdiğiniz bileşenlerin **render edilmiş çıktısını içermez**. Aşağıdaki örnekte `RowList` tarafından alınan `children` yalnızca üç değil, iki öğe içerir:
309
309
310
-
1.`<p>This is the first item.</p>`
310
+
1.`<p>This is the first item.</p>`
311
311
2.`<MoreRows />`
312
312
313
-
This is why only two row wrappers are generated inthis example:
313
+
Bu nedenle bu örnekte yalnızca iki row wrapper oluşturulur:
314
314
315
315
<Sandpack>
316
316
@@ -369,15 +369,15 @@ export default function RowList({ children }) {
369
369
370
370
</Sandpack>
371
371
372
-
**There is no way to get the rendered output of an inner component** like `<MoreRows />` when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
372
+
**`<MoreRows />` gibi iç bileşenlerin render edilmiş çıktısını `children` üzerinde işlem yaparak elde etmenin hiçbir yolu yoktur.** Bu yüzden [genellikle alternatif çözümlerden birini kullanmak daha iyidir.](#alternatives)
373
373
374
374
</Pitfall>
375
375
376
376
---
377
377
378
-
### Running some code for each child {/*running-some-code-for-each-child*/}
378
+
### Her child için kod çalıştırma {/*running-some-code-for-each-child*/}
379
379
380
-
Call `Children.forEach` to iterate over each child in the `children` data structure. It does not return any value and is similar to the [array `forEach` method.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) You can use it to run custom logic like constructing your own array.
380
+
`Children.forEach`fonksiyonunu, `children`veri yapısındaki her child üzerinde gezinmek için çağırabilirsiniz. Herhangi bir değer döndürmez ve [array `forEach`metoduna](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) benzer. Kendi array’inizi oluşturmak gibi özel mantıkları çalıştırmak için kullanılabilir.
381
381
382
382
<Sandpack>
383
383
@@ -413,15 +413,15 @@ export default function SeparatorList({ children }) {
413
413
414
414
<Pitfall>
415
415
416
-
As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
416
+
Daha önce de belirtildiği gibi, `children` üzerinde işlem yaparken iç bir bileşenin render edilmiş çıktısını elde etmenin hiçbir yolu yoktur. Bu yüzden [genellikle alternatif çözümlerden birini kullanmak daha iyidir.](#alternatives)
417
417
418
418
</Pitfall>
419
419
420
420
---
421
421
422
422
### Counting children {/*counting-children*/}
423
423
424
-
Call `Children.count(children)`to calculate the number of children.
424
+
`Children.count(children)`fonksiyonunu çağırarak children sayısını hesaplayabilirsiniz.
425
425
426
426
<Sandpack>
427
427
@@ -484,15 +484,15 @@ export default function RowList({ children }) {
484
484
485
485
<Pitfall>
486
486
487
-
As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
487
+
Daha önce de belirtildiği gibi, `children` üzerinde işlem yaparken iç bir bileşenin render edilmiş çıktısını elde etmenin hiçbir yolu yoktur. Bu yüzden [genellikle alternatif çözümlerden birini kullanmak daha iyidir.](#alternatives)
488
488
489
489
</Pitfall>
490
490
491
491
---
492
492
493
-
### Converting children to an array {/*converting-children-to-an-array*/}
Call `Children.toArray(children)` to turn the `children` data structure into a regular JavaScript array. This lets you manipulate the array with built-in array methods like [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), or [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)
495
+
`Children.toArray(children)`fonksiyonunu çağırarak `children`veri yapısını normal bir JavaScript array’ine dönüştürebilirsiniz. Bu sayede, [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) veya [`reverse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) gibi yerleşik array metodlarını kullanarak üzerinde işlem yapabilirsiniz.
496
496
497
497
<Sandpack>
498
498
@@ -524,31 +524,31 @@ export default function ReversedList({ children }) {
524
524
525
525
<Pitfall>
526
526
527
-
As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
527
+
Daha önce de belirtildiği gibi, `children` üzerinde işlem yaparken iç bir bileşenin render edilmiş çıktısını elde etmenin hiçbir yolu yoktur. Bu yüzden [genellikle alternatif çözümlerden birini kullanmak daha iyidir.](#alternatives)
528
528
529
529
</Pitfall>
530
530
531
531
---
532
532
533
-
## Alternatives {/*alternatives*/}
533
+
## Alternatifler {/*alternatives*/}
534
534
535
535
<Note>
536
536
537
-
This section describes alternatives to the`Children`API (with capital `C`) that's imported like this:
537
+
Bu bölüm, şu şekilde import edilen`Children` API’sine (büyük `C` ile yazılan) alternatifleri açıklar:
538
538
539
539
```js
540
540
import { Children } from 'react';
541
541
```
542
542
543
-
Don't confuse it with [using the `children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) (lowercase`c`), which is good and encouraged.
543
+
Bunu, [JSX’i `children` prop’u olarak kullanmakla](/learn/passing-props-to-a-component#passing-jsx-as-children) (küçük`c`), karıştırmayın; bu kullanım doğrudur ve önerilir.
### Birden fazla bileşen sunma {/*exposing-multiple-components*/}
548
548
549
-
Manipulating children with the `Children`methods often leads to fragile code. When you pass children to a component inJSX, you don't usually expect the component to manipulate or transform the individual children.
549
+
`Children`metodlarıyla children üzerinde işlem yapmak genellikle kırılgan (fragile) kodlara yol açar. JSX içinde bir bileşene children verdiğinizde, genellikle o bileşenin bu children’ları tek tek manipüle etmesini veya dönüştürmesini beklemezsiniz.
550
550
551
-
When you can, try to avoid using the `Children` methods. For example, if you want every child of `RowList` to be wrapped in `<div className="Row">`, export a `Row` component, and manually wrap every row into it like this:
551
+
Mümkün olduğunda `Children`metodlarını kullanmaktan kaçınmaya çalışın. Örneğin, `RowList`içindeki her child’ı `<div className="Row">` ile sarmalamak istiyorsanız, bir `Row`bileşeni exportedinvehersatırı manuelolarakonunlasarmalayın:
552
552
553
553
<Sandpack>
554
554
@@ -607,7 +607,7 @@ export function Row({ children }) {
607
607
608
608
</Sandpack>
609
609
610
-
Unlike using `Children.map`, this approach does not wrap every child automatically. **However, this approach has a significant benefit compared to the [earlier example with `Children.map`](#transforming-children) because it works even if you keep extracting more components.** For example, it still works if you extract your own `MoreRows` component:
610
+
`Children.map` kullanmaktan farklı olarak, bu yaklaşım her child’ı otomatik olarak sarmalamaz. **Ancak, bu yaklaşımın [`Children.map` ile yapılan önceki örneğe](#transforming-children) kıyasla önemli bir avantajı vardır: daha fazla bileşen çıkarsanız (extract etseniz) bile çalışmaya devam eder.** Örneğin, kendi `MoreRows`bileşeninizi çıkarsanız bile hâlâ çalışır:
611
611
612
612
<Sandpack>
613
613
@@ -674,13 +674,13 @@ export function Row({ children }) {
674
674
675
675
</Sandpack>
676
676
677
-
This wouldn't work with`Children.map`because it would "see"`<MoreRows />` as a single child (and a single row).
677
+
Bu yaklaşım `Children.map`ile çalışmaz çünkü `<MoreRows />`’u tek bir child (ve tek bir row) olarak “görür”.
678
678
679
679
---
680
680
681
-
### Accepting an array of objects as a prop {/*accepting-an-array-of-objects-as-a-prop*/}
681
+
### Prop olarak object array kabul etme {/*accepting-an-array-of-objects-as-a-prop*/}
682
682
683
-
You can also explicitly pass an array as a prop. For example, this`RowList`accepts a `rows` array as a prop:
683
+
Ayrıca bir array’i açıkça prop olarak geçebilirsiniz. Örneğin, bu`RowList`bir `rows` array’ini prop olarak kabul eder:
0 commit comments