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/useId.md
+47-46Lines changed: 47 additions & 46 deletions
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: useId
4
4
5
5
<Intro>
6
6
7
-
`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes.
7
+
`useId`, erişilebilirlik özniteliklerine iletmek üzere benzersiz kimlikler üreten React Hook'udur.
8
8
9
9
```js
10
10
constid=useId()
@@ -16,11 +16,11 @@ const id = useId()
16
16
17
17
---
18
18
19
-
## Reference {/*reference*/}
19
+
## Referans {/*reference*/}
20
20
21
21
### `useId()` {/*useid*/}
22
22
23
-
Call `useId` at the top level of your component to generate a unique ID:
23
+
Benzersiz bir kimlik oluşturmak için `useId`'yi bileşeninizin kök kapsamında çağırın:
24
24
25
25
```js
26
26
import { useId } from'react';
@@ -30,35 +30,35 @@ function PasswordField() {
30
30
// ...
31
31
```
32
32
33
-
[See more examples below.](#usage)
33
+
[Daha fazla örnek için aşağıya bakın.](#usage)
34
34
35
-
#### Parameters {/*parameters*/}
35
+
#### Parametreler {/*parameters*/}
36
36
37
-
`useId` does not take any parameters.
37
+
Herhangi bir parametre almaz.
38
38
39
-
#### Returns {/*returns*/}
39
+
#### Dönüş Değerleri {/*returns*/}
40
40
41
-
`useId` returns a unique ID string associated with this particular `useId` call in this particular component.
41
+
Çağrıldığı bileşene özel olarak her bir `useId` çağrısı için _karakter dizisi (string)_ tipinde benzersiz kimlik döner.
42
42
43
-
#### Caveats {/*caveats*/}
43
+
#### Uyarılar {/*caveats*/}
44
44
45
-
* `useId`is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
45
+
* `useId`bir Hook olduğundan, yalnızca **bileşeninizin kök kapsamında** ya da kendi Hook'larınızda çağırabilirsiniz. Döngülerin ve koşulların içinde çağıramazsınız. Eğer çağırmak zorunda kaldıysanız yeni bir bileşene çıkarın ve state'i ona taşıyın.
46
46
47
-
* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
47
+
* Liste elemanlarına **anahtar üretmek için kullanılmamalıdır**. [Anahtarlar elinizdeki veriden üretilmelidir.](/learn/rendering-lists#where-to-get-your-key)
48
48
49
49
---
50
50
51
-
## Usage {/*usage*/}
51
+
## Kullanım {/*usage*/}
52
52
53
53
<Pitfall>
54
54
55
-
**Do not call`useId`to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
@@ -77,26 +77,26 @@ You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different at
77
77
</>
78
78
```
79
79
80
-
**Let's walk through an example to see when this is useful.**
80
+
**Bunun ne zaman faydalı olabileceğini görmek için bir örnek üzerinden ilerleyelim.**
81
81
82
-
[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that an element (like an input) is described by another element (like a paragraph).
82
+
[`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) gibi [HTML erişilebilirlik öznitelikleri](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA), iki etiketin birbirine bağlı olduğunu belirtmenizi sağlar. Örneğin, bir elementin (mesela `<input>`) başka bir element (mesela `<p>`) tarafından tanımlandığını belirtebilirsiniz.
83
83
84
-
In regular HTML, you would write it like this:
84
+
Saf HTML'de bunu şu şekilde yazarsınız:
85
85
86
86
```html {5,8}
87
87
<label>
88
-
Password:
88
+
Şifre:
89
89
<input
90
90
type="password"
91
91
aria-describedby="password-hint"
92
92
/>
93
93
</label>
94
94
<p id="password-hint">
95
-
The password should contain at least 18characters
95
+
Şifre en az 18karakter içermelidir
96
96
</p>
97
97
```
98
98
99
-
However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, generate a unique ID with `useId`:
99
+
Ancak, doğrudan koda yazılan kimlikler React'ta iyi bir pratik değildir. Bir bileşen sayfada birden fazla kez render edilebilir--ancak kimlikler benzersiz olmalıdır! Bunun yerine `useId` ile benzersiz bir kimlik oluşturun:
100
100
101
101
```js {4,11,14}
102
102
import { useId } from'react';
@@ -106,21 +106,21 @@ function PasswordField() {
106
106
return (
107
107
<>
108
108
<label>
109
-
Password:
109
+
Şifre:
110
110
<input
111
111
type="password"
112
112
aria-describedby={passwordHintId}
113
113
/>
114
114
</label>
115
115
<p id={passwordHintId}>
116
-
The password should contain at least 18characters
116
+
Şifre en az 18karakter içermelidir
117
117
</p>
118
118
</>
119
119
);
120
120
}
121
121
```
122
122
123
-
Now, even if `PasswordField`appears multiple times on the screen, the generated IDs won't clash.
123
+
Artık `PasswordField`ekranda birden fazla kez görünse bile üretilen kimlikler çakışmaz.
124
124
125
125
<Sandpack>
126
126
@@ -132,14 +132,14 @@ function PasswordField() {
132
132
return (
133
133
<>
134
134
<label>
135
-
Password:
135
+
Şifre:
136
136
<input
137
137
type="password"
138
138
aria-describedby={passwordHintId}
139
139
/>
140
140
</label>
141
141
<p id={passwordHintId}>
142
-
The password should contain at least 18characters
142
+
Şifre en az 18karakter içermelidir
143
143
</p>
144
144
</>
145
145
);
@@ -148,9 +148,9 @@ function PasswordField() {
148
148
exportdefaultfunctionApp() {
149
149
return (
150
150
<>
151
-
<h2>Choose password</h2>
151
+
<h2>Şifreni seç</h2>
152
152
<PasswordField />
153
-
<h2>Confirm password</h2>
153
+
<h2>Şifreni doğrula</h2>
154
154
<PasswordField />
155
155
</>
156
156
);
@@ -163,33 +163,33 @@ input { margin: 5px; }
163
163
164
164
</Sandpack>
165
165
166
-
[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies.
166
+
Yardımcı teknolojiler ile edinilen kullanıcı deneyiminde yarattığı farkı görmek için [bu videoyu izleyin](https://www.youtube.com/watch?v=0dNzNcuEuOo).
167
167
168
168
<Pitfall>
169
169
170
-
With [server rendering](/reference/react-dom/server), **`useId` requires an identical component tree on the server and the client**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match.
170
+
[Sunucu taraflı render](/reference/react-dom/server) ile birlikte kullanılan **`useId`, sunucu ve istemci tarafında özdeş bileşen ağacına gereksinim duyar**. Sunucu ve istemcide render edilen ağaçlar birebir eşleşmezse, oluşan kimlikler de eşleşmeyecektir.
171
171
172
172
</Pitfall>
173
173
174
174
<DeepDive>
175
175
176
-
#### Why is useId better than an incrementing counter? {/*why-is-useid-better-than-an-incrementing-counter*/}
176
+
#### Neden useId kullanmak artan bir sayaca nazaran daha iyidir? {/*why-is-useid-better-than-an-incrementing-counter*/}
177
177
178
-
You might be wondering why `useId` is better than incrementing a global variable like `nextId++`.
178
+
`useId`'nin `nextId++` gibi global bir değişkeni arttırmaktan neden daha iyi olduğunu merak ediyor olabilirsiniz.
179
179
180
-
The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
180
+
Temel avantajı, React'ın [sunucu taraflı render](/reference/react-dom/server) ile çalışacağını garanti etmesidir. Bileşenleriniz sunucu taraflı render ensasında HTML çıktısı üretir. Ardından istemcide, üretilen HTML'e [hidratlama](/reference/react-dom/client/hydrateRoot) (hydration) sırasında olay yöneticileri eklenir. Hidratlamanın çalışması için, istemci çıktısının sunucu HTML'iyle eşleşmesi gerekir.
181
181
182
-
This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
182
+
Artan sayaç kullanarak bunu garanti etmek çok zordur. İstemci bileşenlerinin hidratlanma sırası ile sunucu HTML'inin tarayıcıya gönderilme sırası eşleşmeyebilir. `useId`'yi çağırmak; hidratlamanın çalışacağından, sunucu ve istemci arasındaki çıktının özdeş olacağından emin olmanızı sağlar.
183
183
184
-
Inside React,`useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
184
+
React'ta`useId`'nin değeri, çağrıldığı bileşenin ağaç içindeki hiyerarşik yolundan (parent path) üretilir. Dolayısıyla sunucu ve istemci ağaçları aynıysa, ürettikleri değerler render sırasına bakılmaksızın eşleşecektir.
185
185
186
186
</DeepDive>
187
187
188
188
---
189
189
190
-
### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/}
190
+
### Birkaç ilişkili element için kimlik üretmek {/*generating-ids-for-several-related-elements*/}
191
191
192
-
If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them:
192
+
Bir takım ilişkili elemente kimlik vermeniz gerekiyorsa, `useId`'yi çağırarak ürettiğiniz kimliği sonekler ile özelleştirebilirsiniz:
193
193
194
194
<Sandpack>
195
195
@@ -200,10 +200,10 @@ export default function Form() {
This lets you avoid calling `useId` for every single element that needs a unique ID.
219
+
Bu kullanım, benzersiz kimliğe ihtiyaç duyan her bir element için `useId`'yi çağırmaktan kaçınmanızı sağlar.
220
220
221
221
---
222
222
223
-
### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/}
223
+
### Üretilen tüm kimlikler için önek belirlemek {/*specifying-a-shared-prefix-for-all-generated-ids*/}
224
224
225
-
If you render multiple independent React applications on a single page, pass `identifierPrefix` as an option to your [`createRoot`](/reference/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId` will start with the distinct prefix you've specified.
225
+
226
+
Tek bir sayfada birden fazla bağımsız React uygulaması render ederseniz, [`createRoot`](/reference/react-dom/client/createRoot#parameters) veya [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) metodlarına iletebileceğiniz `identifierPrefix` parametresini kullanın. Bu sayede `useId` ile oluşturulan her bir kimlik benzersiz bir önek ile başlayacağından, iki farklı uygulama tarafından oluşturulan kimlikler asla çakışmaz.
0 commit comments