diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index 76e563bb4..4e0132fca 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -120,21 +120,21 @@ function RowList({ children }) { #### Parameters {/*children-map-parameters*/} -* `children`: Bileşeniniz tarafından alınan [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) değeri. -* `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. -* **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`. +* `children`: Bileşeniniz tarafından alınan [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) değeri. +* `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. +* **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. #### Returns {/*children-map-returns*/} -If `children` is `null` or `undefined`, returns the same value. +Eğer `children` `null` veya `undefined` ise, aynı değeri döndürür. -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`. +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. -#### Caveats {/*children-map-caveats*/} +#### Uyarılar {/*children-map-caveats*/} -- 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. +- 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. -- 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. +- `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. --- @@ -224,7 +224,7 @@ Yukarıdaki örnekte, `RowList` aldığı her children'ı bir `
``` -Then, with the `RowList` implementation above, the final rendered result will look like this: +Daha sonra, yukarıdaki `RowList` implementasyonu ile birlikte, son render edilmiş sonuç şu şekilde görünecektir: ```js
@@ -240,7 +240,7 @@ Then, with the `RowList` implementation above, the final rendered result will lo
``` -`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. +`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. @@ -293,24 +293,24 @@ export default function RowList({ children }) { -#### Why is the children prop not always an array? {/*why-is-the-children-prop-not-always-an-array*/} +#### `children` prop neden her zaman bir array değildir? {/*why-is-the-children-prop-not-always-an-array*/} -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. +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. -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 if React changes how the data structure is actually implemented. +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. -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. +`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”. -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: +`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: -1. `

This is the first item.

` +1. `

This is the first item.

` 2. `` -This is why only two row wrappers are generated in this example: +Bu nedenle bu örnekte yalnızca iki row wrapper oluşturulur: @@ -369,15 +369,15 @@ export default function RowList({ children }) { -**There is no way to get the rendered output of an inner component** like `` when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives) +**`` 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)
--- -### Running some code for each child {/*running-some-code-for-each-child*/} +### Her child için kod çalıştırma {/*running-some-code-for-each-child*/} -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. +`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. @@ -413,7 +413,7 @@ export default function SeparatorList({ children }) { -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) +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) @@ -421,7 +421,7 @@ As mentioned earlier, there is no way to get the rendered output of an inner com ### Counting children {/*counting-children*/} -Call `Children.count(children)` to calculate the number of children. +`Children.count(children)` fonksiyonunu çağırarak children sayısını hesaplayabilirsiniz. @@ -484,15 +484,15 @@ export default function RowList({ children }) { -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) +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) --- -### Converting children to an array {/*converting-children-to-an-array*/} +### Children’ı array’e dönüştürme {/*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) +`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. @@ -524,31 +524,31 @@ export default function ReversedList({ children }) { -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) +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) --- -## Alternatives {/*alternatives*/} +## Alternatifler {/*alternatives*/} -This section describes alternatives to the `Children` API (with capital `C`) that's imported like this: +Bu bölüm, şu şekilde import edilen `Children` API’sine (büyük `C` ile yazılan) alternatifleri açıklar: ```js import { Children } from 'react'; ``` -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. +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. -### Exposing multiple components {/*exposing-multiple-components*/} +### Birden fazla bileşen sunma {/*exposing-multiple-components*/} -Manipulating children with the `Children` methods often leads to fragile code. When you pass children to a component in JSX, you don't usually expect the component to manipulate or transform the individual children. +`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. -When you can, try to avoid using the `Children` methods. For example, if you want every child of `RowList` to be wrapped in `
`, export a `Row` component, and manually wrap every row into it like this: +Mümkün olduğunda `Children` metodlarını kullanmaktan kaçınmaya çalışın. Örneğin, `RowList` içindeki her child’ı `
` ile sarmalamak istiyorsanız, bir `Row` bileşeni export edin ve her satırı manuel olarak onunla sarmalayın: @@ -607,7 +607,7 @@ export function Row({ children }) { -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: +`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: @@ -674,13 +674,13 @@ export function Row({ children }) { -This wouldn't work with `Children.map` because it would "see" `` as a single child (and a single row). +Bu yaklaşım `Children.map` ile çalışmaz çünkü ``’u tek bir child (ve tek bir row) olarak “görür”. --- -### Accepting an array of objects as a prop {/*accepting-an-array-of-objects-as-a-prop*/} +### Prop olarak object array kabul etme {/*accepting-an-array-of-objects-as-a-prop*/} -You can also explicitly pass an array as a prop. For example, this `RowList` accepts a `rows` array as a prop: +Ayrıca bir array’i açıkça prop olarak geçebilirsiniz. Örneğin, bu `RowList` bir `rows` array’ini prop olarak kabul eder: @@ -729,9 +729,9 @@ export function RowList({ rows }) { -Since `rows` is a regular JavaScript array, the `RowList` component can use built-in array methods like [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) on it. +`rows` normal bir JavaScript array olduğu için, `RowList` bileşeni üzerinde [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) gibi yerleşik array metodlarını kullanabilir. -This pattern is especially useful when you want to be able to pass more information as structured data together with children. In the below example, the `TabSwitcher` component receives an array of objects as the `tabs` prop: +Bu pattern, children ile birlikte daha fazla bilgiyi yapılandırılmış veri olarak geçmek istediğiniz durumlarda özellikle kullanışlıdır. Aşağıdaki örnekte, `TabSwitcher` bileşeni `tabs` prop’u olarak object’lerden oluşan bir array alır: @@ -789,13 +789,13 @@ export default function TabSwitcher({ tabs }) { -Unlike passing the children as JSX, this approach lets you associate some extra data like `header` with each item. Because you are working with the `tabs` directly, and it is an array, you do not need the `Children` methods. +JSX olarak children geçirmekten farklı olarak, bu yaklaşım her bir öğeye `header` gibi ekstra verileri ilişkilendirmenize izin verir. `tabs` verisiyle doğrudan çalıştığınız ve bu bir array olduğu için `Children` metodlarına ihtiyaç duymazsınız. --- -### Calling a render prop to customize rendering {/*calling-a-render-prop-to-customize-rendering*/} +### Render prop çağırarak render’ı özelleştirme {/*calling-a-render-prop-to-customize-rendering*/} -Instead of producing JSX for every single item, you can also pass a function that returns JSX, and call that function when necessary. In this example, the `App` component passes a `renderContent` function to the `TabSwitcher` component. The `TabSwitcher` component calls `renderContent` only for the selected tab: +Her bir öğe için JSX üretmek yerine, JSX döndüren bir fonksiyon da geçebilir ve bunu gerektiğinde çağırabilirsiniz. Bu örnekte, `App` bileşeni `TabSwitcher` bileşenine bir `renderContent` fonksiyonu geçirir. `TabSwitcher` ise bu fonksiyonu yalnızca seçili tab için çağırır: @@ -844,9 +844,9 @@ export default function TabSwitcher({ tabIds, getHeader, renderContent }) { -A prop like `renderContent` is called a *render prop* because it is a prop that specifies how to render a piece of the user interface. However, there is nothing special about it: it is a regular prop which happens to be a function. +`renderContent` gibi bir prop’a *render prop* denir çünkü kullanıcı arayüzünün bir parçasının nasıl render edileceğini belirten bir prop’tur. Ancak bunda özel bir durum yoktur: sadece fonksiyon olan normal bir prop’tur. -Render props are functions, so you can pass information to them. For example, this `RowList` component passes the `id` and the `index` of each row to the `renderRow` render prop, which uses `index` to highlight even rows: +Render prop’lar fonksiyon olduğu için onlara bilgi de geçebilirsiniz. Örneğin, bu `RowList` bileşeni her row’un `id` ve `index` değerini `renderRow` render prop’una geçirir ve `renderRow` bu `index` değerini kullanarak çift satırları highlight eder: @@ -927,15 +927,15 @@ export function Row({ children, isHighlighted }) { -This is another example of how parent and child components can cooperate without manipulating the children. +Bu, parent ve child bileşenlerin children’ları manipulate etmeden birlikte nasıl çalışabileceğine dair başka bir örnektir. --- -## Troubleshooting {/*troubleshooting*/} +## Sorun giderme {/*troubleshooting*/} -### I pass a custom component, but the `Children` methods don't show its render result {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/} +### Özel bir bileşen geçiriyorum ama `Children` metodları onun render sonucunu göstermiyor {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/} -Suppose you pass two children to `RowList` like this: +Diyelim ki `RowList` bileşenine şu şekilde iki child geçiriyorsunuz: ```js @@ -944,6 +944,6 @@ Suppose you pass two children to `RowList` like this: ``` -If you do `Children.count(children)` inside `RowList`, you will get `2`. Even if `MoreRows` renders 10 different items, or if it returns `null`, `Children.count(children)` will still be `2`. From the `RowList`'s perspective, it only "sees" the JSX it has received. It does not "see" the internals of the `MoreRows` component. +Eğer `RowList` içinde `Children.count(children)` kullanırsanız `2` sonucunu alırsınız. `MoreRows` 10 farklı item render etse bile ya da `null` döndürse bile, `Children.count(children)` yine `2` olur. `RowList` açısından bakıldığında sadece kendisine gelen JSX’i “görür”. `MoreRows` bileşeninin iç detaylarını “göremez”. -The limitation makes it hard to extract a component. This is why [alternatives](#alternatives) are preferred to using `Children`. +Bu kısıtlama, bir bileşeni extract etmeyi zorlaştırır. Bu yüzden `Children` kullanmak yerine [alternatifler](#alternatives) tercih edilir.