Skip to content

Commit 789e84b

Browse files
committed
cloneElement
1 parent ce862bd commit 789e84b

File tree

1 file changed

+27
-27
lines changed

1 file changed

+27
-27
lines changed

src/content/reference/react/cloneElement.md

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ title: cloneElement
44

55
<Pitfall>
66

7-
Using `cloneElement` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives)
7+
`cloneElement` kullanımı yaygın değildir ve kırılgan kodlara yol açabilir. [Yaygın alternatiflere göz atın.](#alternatives)
88

99
</Pitfall>
1010

1111
<Intro>
1212

13-
`cloneElement` lets you create a new React element using another element as a starting point.
13+
`cloneElement`, başka bir elementi başlangıç noktası olarak kullanarak yeni bir React elementi oluşturmanıza olanak tanır.
1414

1515
```js
1616
const clonedElement = cloneElement(element, props, ...children)
@@ -22,11 +22,11 @@ const clonedElement = cloneElement(element, props, ...children)
2222

2323
---
2424

25-
## Reference {/*reference*/}
25+
## Referans {/*reference*/}
2626

2727
### `cloneElement(element, props, ...children)` {/*cloneelement*/}
2828

29-
Call `cloneElement` to create a React element based on the `element`, but with different `props` and `children`:
29+
`element` temel alınarak ancak farklı `props` ve `children` ile bir React elementi oluşturmak için `cloneElement` fonksiyonunu çağırın:
3030

3131
```js
3232
import { cloneElement } from 'react';
@@ -43,42 +43,42 @@ const clonedElement = cloneElement(
4343
console.log(clonedElement); // <Row title="Cabbage" isHighlighted={true}>Goodbye</Row>
4444
```
4545

46-
[See more examples below.](#usage)
46+
[Daha fazla örneği aşağıda inceleyin.](#usage)
4747

48-
#### Parameters {/*parameters*/}
48+
#### Parametreler {/*parameters*/}
4949

50-
* `element`: The `element` argument must be a valid React element. For example, it could be a JSX node like `<Something />`, the result of calling [`createElement`](/reference/react/createElement), or the result of another `cloneElement` call.
50+
* `element`: `element` argümanı geçerli bir React elementi olmalıdır. Örneğin `<Something />` gibi bir JSX node’u, [`createElement`](/reference/react/createElement) çağrısının sonucu veya başka bir `cloneElement` çağrısının sonucu olabilir.
5151

52-
* `props`: The `props` argument must either be an object or `null`. If you pass `null`, the cloned element will retain all of the original `element.props`. Otherwise, for every prop in the `props` object, the returned element will "prefer" the value from `props` over the value from `element.props`. The rest of the props will be filled from the original `element.props`. If you pass `props.key` or `props.ref`, they will replace the original ones.
52+
* `props`: `props` argümanı bir obje veya `null` olmalıdır. Eğer `null` geçirirseniz, clone edilen element orijinal `element.props` değerlerini korur. Aksi takdirde, `props` objesindeki her prop için dönen element, `element.props` yerine `props` içindeki değeri "tercih eder". Geri kalan prop’lar orijinal `element.props`’tan doldurulur. Eğer `props.key` veya `props.ref` geçirirseniz, bunlar orijinal değerlerin yerini alır.
5353

54-
* **optional** `...children`: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes. If you don't pass any `...children` arguments, the original `element.props.children` will be preserved.
54+
* **opsiyonel** `...children`: Sıfır veya daha fazla child node. Bunlar React element’leri, string’ler, sayılar, [portals](/reference/react-dom/createPortal), boş node’lar (`null`, `undefined`, `true`, `false`) ve React node dizileri dahil olmak üzere herhangi bir React node olabilir. Eğer herhangi bir `...children` argümanı geçmezseniz, orijinal `element.props.children` korunur.
5555

5656
#### Returns {/*returns*/}
5757

58-
`cloneElement` returns a React element object with a few properties:
58+
`cloneElement`, birkaç özelliğe sahip bir React element objesi döndürür:
5959

60-
* `type`: Same as `element.type`.
61-
* `props`: The result of shallowly merging `element.props` with the overriding `props` you have passed.
62-
* `ref`: The original `element.ref`, unless it was overridden by `props.ref`.
63-
* `key`: The original `element.key`, unless it was overridden by `props.key`.
60+
* `type`: `element.type` ile aynıdır.
61+
* `props`: `element.props` ile verdiğiniz override `props`’un shallow merge edilmesi sonucu oluşur.
62+
* `ref`: `props.ref` ile override edilmediyse, orijinal `element.ref`.
63+
* `key`: `props.key` ile override edilmediyse, orijinal `element.key`.
6464

65-
Usually, you'll return the element from your component or make it a child of another element. Although you may read the element's properties, it's best to treat every element as opaque after it's created, and only render it.
65+
Genellikle, bu elementi component’inizden döndürür veya başka bir elementin child’ı olarak kullanırsınız. Element’in özelliklerini okuyabilseniz de, oluşturulduktan sonra her elementi opaque (iç yapısı bilinmeyen) olarak ele almak ve sadece render etmek en iyisidir.
6666

67-
#### Caveats {/*caveats*/}
67+
#### Uyarılar {/*caveats*/}
6868

69-
* Cloning an element **does not modify the original element.**
69+
* Bir elementi clone etmek **orijinal elementi değiştirmez.**
7070

71-
* You should only **pass children as multiple arguments to `cloneElement` if they are all statically known,** like `cloneElement(element, null, child1, child2, child3)`. If your children are dynamic, pass the entire array as the third argument: `cloneElement(element, null, listItems)`. This ensures that React will [warn you about missing `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) for any dynamic lists. For static lists this is not necessary because they never reorder.
71+
* `children`’ları `cloneElement`’e yalnızca **tamamı statik olarak biliniyorsa çoklu argümanlar şeklinde geçmelisiniz,** örneğin `cloneElement(element, null, child1, child2, child3)`. Eğer `children` dinamik ise, tüm diziyi üçüncü argüman olarak geçin: `cloneElement(element, null, listItems)`. Bu, React’in dinamik listeler için [eksik `key` uyarısı vermesini](/learn/rendering-lists#keeping-list-items-in-order-with-key) sağlar. Statik listeler için bu gerekli değildir çünkü yeniden sıralanmazlar.
7272

73-
* `cloneElement` makes it harder to trace the data flow, so **try the [alternatives](#alternatives) instead.**
73+
* `cloneElement`, veri akışını takip etmeyi zorlaştırır, bu yüzden **bunun yerine [alternatifleri](#alternatives) kullanmayı deneyin.**
7474

7575
---
7676

77-
## Usage {/*usage*/}
77+
## Kullanım {/*usage*/}
7878

79-
### Overriding props of an element {/*overriding-props-of-an-element*/}
79+
### Bir öğenin özelliklerini geçersiz kılma {/*overriding-props-of-an-element*/}
8080

81-
To override the props of some <CodeStep step={1}>React element</CodeStep>, pass it to `cloneElement` with the <CodeStep step={2}>props you want to override</CodeStep>:
81+
Bazı <CodeStep step={1}>React element</CodeStep> prop’larını override etmek için, onu `cloneElement`’e <CodeStep step={2}>override etmek istediğiniz props</CodeStep> ile geçirin:
8282

8383
```js [[1, 5, "<Row title=\\"Cabbage\\" />"], [2, 6, "{ isHighlighted: true }"], [3, 4, "clonedElement"]]
8484
import { cloneElement } from 'react';
@@ -90,11 +90,11 @@ const clonedElement = cloneElement(
9090
);
9191
```
9292

93-
Here, the resulting <CodeStep step={3}>cloned element</CodeStep> will be `<Row title="Cabbage" isHighlighted={true} />`.
93+
Burada, ortaya çıkan <CodeStep step={3}>cloned element</CodeStep> `<Row title="Cabbage" isHighlighted={true} />` olacaktır.
9494

95-
**Let's walk through an example to see when it's useful.**
95+
**Ne zaman kullanışlı olduğunu görmek için bir örnek üzerinden gidelim.**
9696

97-
Imagine a `List` component that renders its [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) as a list of selectable rows with a "Next" button that changes which row is selected. The `List` component needs to render the selected `Row` differently, so it clones every `<Row>` child that it has received, and adds an extra `isHighlighted: true` or `isHighlighted: false` prop:
97+
Bir `List` component’ini düşünün; bu component [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) öğelerini, seçilebilir satırlar listesi olarak render eder ve hangi satırın seçili olduğunu değiştiren bir "Next" butonu vardır. `List` component’i seçili `Row`’u farklı render etmesi gerektiğinden, aldığı her `<Row>` child’ını clone eder ve ekstra bir `isHighlighted: true` veya `isHighlighted: false` prop’u ekler:
9898

9999
```js {6-8}
100100
export default function List({ children }) {
@@ -108,7 +108,7 @@ export default function List({ children }) {
108108
)}
109109
```
110110
111-
Let's say the original JSX received by `List` looks like this:
111+
Diyelim ki `List`’in aldığı orijinal JSX şöyle görünüyor:
112112
113113
```js {2-4}
114114
<List>
@@ -118,7 +118,7 @@ Let's say the original JSX received by `List` looks like this:
118118
</List>
119119
```
120120
121-
By cloning its children, the `List` can pass extra information to every `Row` inside. The result looks like this:
121+
Children’larını clone ederek, `List` her bir `Row`’a ekstra bilgi geçirebilir. Sonuç şöyle görünür:
122122
123123
```js {4,8,12}
124124
<List>

0 commit comments

Comments
 (0)