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: content/docs/refs-and-the-dom.md
+66-62
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
id: refs-and-the-dom
3
-
title: Refs and the DOM
3
+
title: Ref'ler ve DOM
4
4
redirect_from:
5
5
- "docs/working-with-the-browser.html"
6
6
- "docs/more-about-refs.html"
@@ -11,33 +11,33 @@ redirect_from:
11
11
permalink: docs/refs-and-the-dom.html
12
12
---
13
13
14
-
Refs provide a way to access DOM nodes or React elements created in the render method.
14
+
Ref'ler, render metodu içerisinde oluşturulan DOM düğümümlerine veya React elemanlarına erişmeyi sağlar.
15
15
16
-
In the typical React dataflow, [props](/docs/components-and-props.html)are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
16
+
React'ın tipik veri akışında, [prop'lar](/docs/components-and-props.html)üst bileşenlerin alt bileşenleri ile etkileşime geçmelerinin tek yoludur. Bir alt bileşeni düzenlemek için, onu yeni prop'lar ile yeniden render edersiniz. Fakat, birkaç senaryo vardır ki bir alt bileşeni tipik veri akışının dışında mecburi olarak düzenlemeniz gerekebilir. Düzenlenecek olan bir alt bileşen, bir React bileşeni'nin nesnesi veya bir DOM elemanı olabilir. Her iki durum için de React bir çıkış yolu sağlar.
17
17
18
-
### When to Use Refs {#when-to-use-refs}
18
+
### Ref'ler Ne Zaman Kullanılmalıdır {#when-to-use-refs}
19
19
20
-
There are a few good use cases for refs:
20
+
Ref'leri kullanmak için birkaç iyi kullanım senaryosu bulunmaktadır:
21
21
22
-
*Managing focus, text selection, or media playback.
23
-
*Triggering imperative animations.
24
-
*Integrating with third-party DOM libraries.
22
+
*Focus olayını, metin seçmeyi veya yeniden ortam oynatmayı yönetmek,
23
+
*Animasyonları tetiklemek,
24
+
*Üçüncü-parti DOM kütüphanelerini entegre etmek
25
25
26
-
Avoid using refs for anything that can be done declaratively.
26
+
Bildirimsel (declarative) olarak halledilebilecek durumlar için ref'leri kullanmaktan kaçının.
27
27
28
-
For example, instead of exposing `open()`and`close()`methods on a `Dialog` component, pass an `isOpen` prop to it.
28
+
Örneğin, bir `Dialog` bileşeni için `open()`ve`close()`metodlarını kullanmak yerine, `isOpen` prop'unu `Dialog`'a atayabilirsiniz.
29
29
30
-
### Don't Overuse Refs {#dont-overuse-refs}
30
+
### Ref'leri Aşırı Kullanmayın {#dont-overuse-refs}
31
31
32
-
Your first inclination may be to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. See the [Lifting State Up](/docs/lifting-state-up.html)guide for examples of this.
32
+
Ref'leri kullanmaktaki ilk eğiliminiz uygulamanızdaki bazı şeyleri gerçekleştirmek için olabilir. Eğer durum bu ise bekleyin ve state'in bileşen hiyerarşisinde nerede tutulması gerektiği hakkında biraz daha eleştirel düşünün. Bununla ilgili örnekler için [State'i Yukarı Taşıma](/docs/lifting-state-up.html)rehberini inceleyebilirsiniz.
33
33
34
-
> Note
34
+
> Not
35
35
>
36
-
> The examples below have been updated to use the `React.createRef()` API introduced in React 16.3. If you are using an earlier release of React, we recommend using [callback refs](#callback-refs)instead.
36
+
> Aşağıdaki örnekler React 16.3 ile gelen `React.createRef()` API'sini kullanabilmek için güncellenmiştir. React'in önceki sürümlerini kullanıyorsanız, [callback ref'lerini](#callback-refs)kullanmanızı tavsiye ederiz.
37
37
38
-
### Creating Refs {#creating-refs}
38
+
### Ref'ler Oluşturma {#creating-refs}
39
39
40
-
Refs are created using `React.createRef()`and attached to React elements via the `ref`attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.
40
+
Ref'ler, `React.createRef()`kullanılarak oluşturulur ve React elemanlarına `ref`özelliğini kullanarak eklenir. Ref'ler genellikle bir bileşen oluşturulduğunda, bir nesnenin özelliğine atanır. Böylelikle refler bileşen boyunca referans alınabilir.
41
41
42
42
```javascript{4,7}
43
43
class MyComponent extends React.Component {
@@ -51,44 +51,45 @@ class MyComponent extends React.Component {
51
51
}
52
52
```
53
53
54
-
### Accessing Refs {#accessing-refs}
54
+
### Ref'lere Erişim {#accessing-refs}
55
55
56
-
When a ref is passed to an element in `render`, a reference to the node becomes accessible at the `current`attribute of the ref.
56
+
Bir ref, `render` içerisinde bir elemena aktarıldığında, o düğüme bağlı bir referans, ref'in `current`özelliğinde erişilebilir hale gelir.
57
57
58
58
```javascript
59
59
constnode=this.myRef.current;
60
60
```
61
61
62
-
The value of the ref differs depending on the type of the node:
62
+
Ref'in değeri, düğüm türüne bağlı olarak değişir.
63
63
64
-
-When the `ref`attribute is used on an HTML element, the `ref` created in the constructor with `React.createRef()`receives the underlying DOM element as its `current`property.
65
-
-When the `ref`attribute is used on a custom class component, the `ref` object receives the mounted instance of the component as its `current`.
66
-
-**You may not use the `ref`attribute on function components**because they don't have instances.
64
+
-`ref`özelliği bir HTML elemanında kullanıldığında, constructorda `React.createRef()`ile oluşturulan `ref`, esas DOM elemanını kendisinin `current`özelliği olarak alır.
65
+
-`ref`özelliği özel bir sınıf bileşininde kullanıldığında, ref nesnesi yerleştirilmiş bileşeninin nesnesini `current` olarak alır.
66
+
-**`ref`özelliğini fonksiyon bileşeni içerisinde kullanamazsınız**çünkü fonksiyon bileşenlerinin nesneleri olmaz.
67
67
68
-
The examples below demonstrate the differences.
68
+
Aşağıdaki örnekler farklılıkları göstermektedir.
69
69
70
-
#### Adding a Ref to a DOM Element {#adding-a-ref-to-a-dom-element}
70
+
#### DOM Elemanına Ref Ekleme {#adding-a-ref-to-a-dom-element}
71
+
72
+
Bu kod, bir DOM düğümüne bağlı referans tutmak için `ref` kullanır:
71
73
72
-
This code uses a `ref` to store a reference to a DOM node:
73
74
74
75
```javascript{5,12,22}
75
76
class CustomTextInput extends React.Component {
76
77
constructor(props) {
77
78
super(props);
78
-
// create a ref to store the textInput DOM element
79
+
// textInput DOM elemanını kaydetmek için bir ref oluşturun
// Explicitly focus the text input using the raw DOM API
85
-
// Note: we're accessing "current" to get the DOM node
85
+
// DOM API kullanarak text input'a odaklanın
86
+
// Not : DOM düğümünü getirmek için "current"ı kullanırız.
86
87
this.textInput.current.focus();
87
88
}
88
89
89
90
render() {
90
-
// tell React that we want to associate the <input> ref
91
-
// with the `textInput` that we created in the constructor
91
+
// React’a, constructor içerisinde oluşturduğumuz `textInput`u ile
92
+
//<input> ref'i ile ilişkilendirmek istediğimizi belirtin.
92
93
return (
93
94
<div>
94
95
<input
@@ -105,11 +106,11 @@ class CustomTextInput extends React.Component {
105
106
}
106
107
```
107
108
108
-
React will assign the `current`property with the DOM element when the component mounts, and assign it back to `null`when it unmounts. `ref`updates happen before `componentDidMount`or`componentDidUpdate`lifecycle methods.
109
+
Bileşen eklendiğinde, React, `current`özelliğini DOM elemanı ile atar ve bileşen çıkarıldığında geri `null`atanır. `ref`güncellemeleri `componentDidMount`veya`componentDidUpdate`yaşam döngüsü metodlarından önce gerçekleşir.
109
110
110
-
#### Adding a Ref to a Class Component {#adding-a-ref-to-a-class-component}
111
+
#### Sınıf Bileşenine Ref Ekleme {#adding-a-ref-to-a-class-component}
111
112
112
-
If we wanted to wrap the `CustomTextInput` above to simulate it being clicked immediately after mounting, we could use a ref to get access to the custom input and call its `focusTextInput`method manually:
113
+
Yukarıdaki `CustomTextInput`un, eklendikten hemen sonra tıklandığı senaryosunu simüle etmek istediğimizde, özel input'a erişmek için ve onun `focusTextInput`metodunu çağırmak için ref kullanabiliriz.
113
114
114
115
```javascript{4,8,13}
115
116
class AutoFocusTextInput extends React.Component {
@@ -130,17 +131,17 @@ class AutoFocusTextInput extends React.Component {
130
131
}
131
132
```
132
133
133
-
Note that this only works if `CustomTextInput`is declared as a class:
134
+
Bu sadece `CustomTextInput`bir sınıf olarak tanımlandığında çalışır.
134
135
135
136
```js{1}
136
137
class CustomTextInput extends React.Component {
137
138
// ...
138
139
}
139
140
```
140
141
141
-
#### Refs and Function Components {#refs-and-function-components}
142
+
#### Refler ve Fonksiyon Bileşenleri {#refs-and-function-components}
142
143
143
-
**You may not use the `ref`attribute on function components**because they don't have instances:
144
+
**`ref`özelliğini fonksiyon bileşeni içerisinde kullanmazsınız**çünkü fonksiyon bileşenlerinin nesneleri olmaz.
144
145
145
146
```javascript{1,8,13}
146
147
function MyFunctionComponent() {
@@ -153,21 +154,21 @@ class Parent extends React.Component {
153
154
this.textInput = React.createRef();
154
155
}
155
156
render() {
156
-
// This will *not* work!
157
+
// Bu çalışmayacaktır!
157
158
return (
158
159
<MyFunctionComponent ref={this.textInput} />
159
160
);
160
161
}
161
162
}
162
163
```
163
164
164
-
You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state.
165
+
Eğer bir ref'e ihtiyacınız varsa, bileşeni sınıfa dönüştürmelisiniz. Tıpkı yaşam döngüsü metodlarında veya state ihtiyacınız olduğunda yaptığınız gibi.
165
166
166
-
You can, however, **use the `ref` attribute inside a function component** as long as you refer to a DOM element or a class component:
167
+
Bir DOM elemanına veya sınıf bileşenine işaret ettiğiniz sürece **fonksiyon bileşeni içerisinde `ref` kullanabilirsiniz**
167
168
168
169
```javascript{2,3,6,13}
169
170
function CustomTextInput(props) {
170
-
//textInput must be declared here so the ref can refer to it
171
+
//textInput'u burada tanımlanmalıdır. Böylelikle ref onu işaret edebilir
171
172
let textInput = React.createRef();
172
173
173
174
function handleClick() {
@@ -189,25 +190,26 @@ function CustomTextInput(props) {
189
190
}
190
191
```
191
192
192
-
### Exposing DOM Refs to Parent Components {#exposing-dom-refs-to-parent-components}
193
+
### DOM Ref'lerini Üst Bileşenlerde Açığa Çıkarma {#exposing-dom-refs-to-parent-components}
193
194
194
-
In rare cases, you might want to have access to a child's DOM node from a parent component. This is generally not recommended because it breaks component encapsulation, but it can occasionally be useful for triggering focus or measuring the size or position of a child DOM node.
195
+
Nadir durumlarda, bir alt bileşenin DOM düğümüne üst bileşenden erişmek isteyebilirsiniz. Bu genelde önerilmez; çünkü bileşenin kapsüllemesini (encapsulation) bozar. Ancak bazen odağı tetiklemek veya bir child DOM düğümünün boyutunu veya konumunu hesaplamak için faydalı olabilir.
195
196
196
-
While you could [add a ref to the child component](#adding-a-ref-to-a-class-component), this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn't work with function components.
197
+
[Alt bileşene ref ekleyebilirsiniz](#adding-a-ref-to-a-class-component). Ancak bu ideal bir çözüm değildir. DOM düğümünden ziyade sadece bir tane bileşen nesnesi alırsınız. Ek olarak bu, fonksiyon bileşenleri ile çalışmaz.
197
198
198
-
If you use React 16.3 or higher, we recommend to use [ref forwarding](/docs/forwarding-refs.html)for these cases. **Ref forwarding lets components opt into exposing any child component's ref as their own**. You can find a detailed example of how to expose a child's DOM node to a parent component [in the ref forwarding documentation](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
199
+
React 16.3 veya daha üst bir versiyonunu kullanırsanız, bu durumlar için [Ref Yönlendirme](/docs/forwarding-refs.html)kullanmanızı tavsite ederiz. **Ref yönlendirme, bileşenlerin, alt bileşenin ref'ini kendilerinin gibi göstermesini sağlar**. Bir alt bileşenin Dom düğümünü üst bileşende nasıl kullanacağınızın daha detaylı örneğini [Ref Yönlendirme](/docs/forwarding-refs.html#forwarding-refs-to-dom-components) dökümanında bulabilirsiniz.
199
200
200
-
If you use React 16.2 or lower, or if you need more flexibility than provided by ref forwarding, you can use [this alternative approach](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)and explicitly pass a ref as a differently named prop.
201
+
React 16.2 veya daha eski bir versiyonu kullanıyorsanız, veya ref yönlendirme ile sağlanan esneklikten daha fazla esnekliğe ihtiyacınız varsa, [bu alternatif yaklaşımı](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)kullanabilirsiniz ve bir ref'i farklı isimlendirilmiş bir prop olarak aktarabilirsiniz.
201
202
202
-
When possible, we advise against exposing DOM nodes, but it can be a useful escape hatch. Note that this approach requires you to add some code to the child component. If you have absolutely no control over the child component implementation, your last option is to use [`findDOMNode()`](/docs/react-dom.html#finddomnode), but it is discouraged and deprecated in [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
203
+
Mümkünse, DOM birimlerini açığa çıkarmamanızı tavsiye ederiz. Ancak faydalı bir kaçış yolu olabilir. Bu yaklaşımın, alt bileşene bazı kodlar eklemenizi gerektirdiğini unutmayın. Alt bileşen üzerinde herhangi bir kontrolünüz yoksa, son seçeneğiniz [`findDOMNode()`](/docs/react-dom.html#finddomnode) kullanmak olabilir. Ama bu [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) içerisinde kullanımdan kaldırılmıştır.
203
204
204
205
### Callback Refs {#callback-refs}
205
206
206
-
React also supports another way to set refs called "callback refs", which gives more fine-grain control over when refs are set and unset.
207
+
React ayrıca, "callback refs" adı verilen refleri ayarlamanın başka bir yolunu da destekler. Bu, ref'ler ayarlandıklarında veya ayarlanmadıkları zamanlarda daha fazla kontrol'e sahip olmalarını sağlar.
207
208
208
-
Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.
209
+
`createRef()` tarafından oluşturulan bir `ref`i aktarmaktansa, bir fonksiyon aktarabilirsiniz. Fonksiyon, React bileşeninin nesnesini veya HTML DOM elemanını bir argüman olarak alır, böylelikle bileşenin nesnesi başka bir yerde saklanabilir ve erişilebilir.
209
210
210
-
The example below implements a common pattern: using the `ref` callback to store a reference to a DOM node in an instance property.
211
+
Aşağıdaki örnekte yaygın bir kullanım uygulanmıştır. `ref` callback'i kullanarak bir nesnenin özelliğinde
212
+
DOM düğümüne bir referans kaydedilir.
211
213
212
214
```javascript{5,7-9,11-14,19,29,34}
213
215
class CustomTextInput extends React.Component {
@@ -222,18 +224,19 @@ class CustomTextInput extends React.Component {
222
224
223
225
this.focusTextInput = () => {
224
226
// Focus the text input using the raw DOM API
227
+
// DOM API kullanark text input'a odaklanın
225
228
if (this.textInput) this.textInput.focus();
226
229
};
227
230
}
228
231
229
232
componentDidMount() {
230
-
// autofocus the input on mount
233
+
// Eklendikten sonra otomatik olarak odaklanma
231
234
this.focusTextInput();
232
235
}
233
236
234
237
render() {
235
-
// Use the `ref` callback to store a reference to the text input DOM
236
-
// element in an instance field (for example, this.textInput).
238
+
// Nesne alanında bulunan metin girdisi elemanına bir referans
239
+
// tutmak için `ref` callback'i kullanın. (örneğin, this.textInput)
237
240
return (
238
241
<div>
239
242
<input
@@ -251,9 +254,9 @@ class CustomTextInput extends React.Component {
251
254
}
252
255
```
253
256
254
-
React will call the `ref` callback with the DOM element when the component mounts, and call it with `null`when it unmounts. Refs are guaranteed to be up-to-date before `componentDidMount`or`componentDidUpdate`fires.
257
+
React, bileşen eklendiğinde DOM elemanı ile beraber `ref` callback'ini çağırır ve bileşen çıkarıldığında da `null`ile çağırır. Ref'lerin, `componentDidMount`veya`componentDidUpdate`tetiklenmeden önce güncel oldukları garanti edilir.
255
258
256
-
You can pass callback refs between components like you can with object refs that were created with `React.createRef()`.
259
+
`React.createRef()` ile oluşturulan nesne ref'leri gibi, Callback ref'lerini de bileşenler arasında aktarabilirsiniz.
257
260
258
261
```javascript{4,13}
259
262
function CustomTextInput(props) {
@@ -275,16 +278,17 @@ class Parent extends React.Component {
275
278
}
276
279
```
277
280
278
-
In the example above, `Parent` passes its ref callback as an `inputRef` prop to the `CustomTextInput`, and the`CustomTextInput` passes the same function as a special `ref`attribute to the `<input>`. As a result, `this.inputElement` in `Parent` will be set to the DOM node corresponding to the `<input>`element in the `CustomTextInput`.
281
+
Yukarıdaki örnekte, `Parent`, ref callback'ini `inputRef` prop'u olarak `CustomTextInput`una aktarır ve`CustomTextInput`u aynı fonksiyonu özel bir `ref`özelliği olarak `<input>`a aktarır. Sonuç olarak, `Parent`taki `this.inputElement`i, `CustomTextInput`taki `<input>`elemanına karşılık gelen DOM düğümüne set edilir.
### Eski API: String Refler {#legacy-api-string-refs}
281
284
282
-
If you worked with React before, you might be familiar with an older API where the `ref`attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**.
285
+
Daha önceden React ile uğraştıysanız, `ref`özelliğinin `"textInput"` gibi bir string olduğu ve DOM düğümüne de `this.refs.textInput` şeklinde erişildiği eski API'a aşina olabilirsiniz. String ref'lerin [bazı sorunlarının](https://github.com/facebook/react/pull/8333#issuecomment-271648615) olması ve **muhtemelen gelecek sürümlerden birinde kaldırılacağı için,** bu kullanımı önermiyoruz.
283
286
284
-
> Note
285
-
>
286
-
> If you're currently using `this.refs.textInput` to access refs, we recommend using either the [callback pattern](#callback-refs) or the [`createRef` API](#creating-refs) instead.
287
287
288
-
### Caveats with callback refs {#caveats-with-callback-refs}
288
+
> Not
289
+
>
290
+
> Eğer `this.refs.textInput`'u reflere erişmek için kullanıyorsanız, [`createRef` API](#creating-refs) veya [callback refleri](#callback-refs) seçeneklerinden birini kullanmanızı tavsiye ederiz.
291
+
292
+
### Callback Ref'lerine Dair Uyarılar {#caveats-with-callback-refs}
289
293
290
-
If the `ref` callback is defined as an inline function, it will get called twice during updates, first with `null`and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one. You can avoid this by defining the `ref` callback as a bound method on the class, but note that it shouldn't matter in most cases.
294
+
Eğer `ref` callback bir satıriçi fonksiyon olarak tanımlanmışsa, güncelleme anında iki kez çağırılacaktır. İlk olarak `null`ile, sonrasında DOM elemanı yeniden çağrılır. Bunun sebebi, fonksiyonun bir nesnesi her render'da oluşturulur. Bu yüzden React eski ref'i kaldırır ve yenisini ekler. Bunu önlemek için `ref` callback'ini sınıfa bağlı bir metod olarak tanımlayabilirsiniz. Ancak bu, birçok durumda önemli değildir.
0 commit comments