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/learn/conditional-rendering.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,21 +4,21 @@ title: Koşullu Olarak Render Etmek
4
4
5
5
<Intro>
6
6
7
-
React bileşenlerinizde çoğu zaman farklı koşullar altında farklı şeyler render etmek isteyeceksiniz. React'de, `if` ifadesi, `&&`, ve `? :` gibi JavaScript syntax'ine ait operatörleri kullanarak koşullu olarak JSX render edebilirsiniz.
7
+
React bileşenlerinizde çoğu zaman farklı koşullar altında farklı şeyler render etmek isteyeceksiniz. React'te, `if` ifadesi, `&&`, ve `? :` gibi JavaScript sözdizimine (syntax) ait operatörleri kullanarak koşullu olarak JSX render edebilirsiniz.
8
8
9
9
</Intro>
10
10
11
11
<YouWillLearn>
12
12
13
13
* Bir koşula bağlı olarak farklı JSX nasıl döndürülür
14
14
* Koşullu olarak bir JSX parçası nasıl dahil edilir veya hariç tutulur
15
-
* React kod tabanında karşınıza çıkacak yaygın kullanılan kısayol koşul syntax'leri
15
+
* React kod tabanında karşınıza çıkacak yaygın kullanılan kısayol koşul sözdizimleri
16
16
17
17
</YouWillLearn>
18
18
19
19
## Koşullu olarak JSX döndürmek {/*conditionally-returning-jsx*/}
20
20
21
-
Diyelim ki elinizde birden çok `Item` render eden bir `PackingList` bileşeni var, ve `Item`'lar bavula konulup konulmadıklarına göre işaret almışlar:
21
+
Diyelim ki elinizde bir `PackingList` bileşeni var. Bu bilesen, bavula konulup konulmadıklarına göre işaretlenebilen, `Item`' bileşeninden birkaç tane render ediyor:
22
22
23
23
<Sandpack>
24
24
@@ -168,7 +168,7 @@ bu iki ifade birbirine çok benzemekte
168
168
<li className="item">{name}</li>
169
169
```
170
170
171
-
Her iki koşulda`<li className="item">...</li>` ifadesini döndürmekte:
171
+
Her iki koşul da`<li className="item">...</li>` ifadesini döndürmekte:
172
172
173
173
```js
174
174
if (isPacked) {
@@ -181,7 +181,7 @@ Bu tekrarlamalar zararlı olmasa bile yazdığınız kodu idame ettirmek zorlaş
JavaScript, koşullu bir ifade yazmak için kompakt bir syntax'e sahiptir -- [koşullu operatör](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) ya da "ternary operatörü".
184
+
JavaScript, koşullu bir ifade yazmak için kompakt bir sözdizimine sahiptir -- [koşullu operatör](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) ya da "ternary operatörü".
185
185
186
186
Böyle yazmak yerine:
187
187
@@ -202,13 +202,13 @@ return (
202
202
);
203
203
```
204
204
205
-
Bu kodu şöyle okuyabilirsiniz:*"eğer `isPacked` prop'u true (doğru) ise, o zaman (`?`) `name + ' ✔'` render et, aksi halde (`:`) `name` render et"*.
205
+
Bu kodu şöyle okuyabilirsiniz: *"eğer `isPacked` prop'u true (doğru) ise, o zaman (`?`) `name + ' ✔'` render et, aksi halde (`:`) `name` render et"*.
206
206
207
207
<DeepDive>
208
208
209
209
#### Bu iki örnek tamamen eşdeğer mi? {/*are-these-two-examples-fully-equivalent*/}
210
210
211
-
Obje tabanlı bir programlama geçmişiniz varsa, yukarıdaki iki örneğin biraz farklı olduğunu çünkü birinin iki farklı `<li>` kopyası oluşturabileceğini düşünebilirsiniz. AncakJSX öğeleri herhangi bir dahili state'e sahip olmadıkları ve gerçek DOM node'u olmadıkları için bir "kopya" değildir. JSX öğeleri aynı blueprint'ler (kılavuz) gibi tanımlardır. Yani bu iki örnek birbiriyle **tamamen** aynıdır. [State'i korumak ve sıfırlamak](/learn/preserving-and-resetting-state) bunun nasıl çalıştığını ayrıntılı bir şekilde anlatmaktadır.
211
+
Nesne yönelimli programlama geçmişiniz varsa, yukarıdaki iki örneğin biraz farklı olduğunu çünkü birinin iki farklı `<li>` kopyası oluşturabileceğini düşünebilirsiniz. Ancak JSX öğeleri herhangi bir dahili state'e sahip olmadıkları ve gerçek DOM node'u olmadıkları için bir "kopya" değildir. JSX öğeleri aynı blueprint'ler (kılavuz) gibi tanımlardır. Yani bu iki örnek birbiriyle **tamamen** aynıdır. [State'i korumak ve sıfırlamak](/learn/preserving-and-resetting-state) bunun nasıl çalıştığını ayrıntılı bir şekilde anlatmaktadır.
212
212
213
213
</DeepDive>
214
214
@@ -348,7 +348,7 @@ if (isPacked) {
348
348
</li>
349
349
```
350
350
351
-
Bu syntax en ayrıntılı ama aynı zamanda en esnek olanıdır. Aşağıda nasıl çalıştığını görebilirsiniz:
351
+
Bu yöntem en ayrıntılı ama aynı zamanda en esnek olanıdır. Aşağıda nasıl çalıştığını görebilirsiniz:
352
352
353
353
<Sandpack>
354
354
@@ -436,7 +436,7 @@ export default function PackingList() {
436
436
437
437
</Sandpack>
438
438
439
-
Eğer JavaScript diline aşina değilseniz, bu çeşitli syntax'ler ilk başta kafa karıştırıcı olabilir. Ancak bunları öğrenmek, sadece React bileşenleri değil, herhangi bir JavaScript kodunu okumanıza ve yazmanıza yardımcı olacaktır! Başlangıçta tercih ettiğiniz syntax ile devam edin ve diğer syntax'lerin nasıl çalıştığını unuttuğunuzda bu sayfadan örneklere bakabilirsiniz.
439
+
Eğer JavaScript diline aşina değilseniz, bu yöntem çeşitliliği ilk başta kafa karıştırıcı olabilir. Ancak bunları öğrenmek, sadece React bileşenleri değil, herhangi bir JavaScript kodunu okumanıza ve yazmanıza yardımcı olacaktır! Başlangıçta tercih ettiğiniz sözdizimi ile devam ederek, diğer sözdizimlerin nasıl çalıştığını unuttuğunuz zaman bu sayfayı referans olarak kullanabilirsiniz.
440
440
441
441
<Recap>
442
442
@@ -453,7 +453,7 @@ Eğer JavaScript diline aşina değilseniz, bu çeşitli syntax'ler ilk başta k
453
453
454
454
<Challenges>
455
455
456
-
#### Bavula konmamış eşyalar için `? :` syntax'i kullanarak bir ikon göster {/*show-an-icon-for-incomplete-items-with--*/}
456
+
#### Bavula konmamış eşyalar için `? :`sözdizimini kullanarak bir ikon göster {/*show-an-icon-for-incomplete-items-with--*/}
457
457
458
458
Koşul operatörünü (`cond ? a : b`) kullanarak eğer `isPacked` prop'u `true` (`doğru`) değilse ❌ render et.
459
459
@@ -535,7 +535,7 @@ export default function PackingList() {
535
535
536
536
#### Eşyanın importance (önemini) `&&` operatörü ile göster {/*show-the-item-importance-with-*/}
537
537
538
-
Bu örnekte, herbir `Item` sayısal bir `importance` prop'u almaktadır. `&&` operatörünü kullanarak "importance" (önem) değeri 0'dan büyük olanların yanında italik olarak "_(Importance: X)_" render edebilirsiniz. Eşyalarınızın listesinin son hali şu şekilde olmalıdır:
538
+
Bu örnekte, her bir`Item` sayısal bir `importance` prop'u almaktadır. `&&` operatörünü kullanarak "importance" (önem) değeri 0'dan büyük olanların yanında italik olarak "_(Importance: X)_" render edebilirsiniz. Eşyalarınızın listesinin son hali şu şekilde olmalıdır:
539
539
540
540
* Space suit _(Importance: 9)_
541
541
* Helmet with a golden leaf
@@ -629,7 +629,7 @@ Bu çözümde, eşyanın ismi ve importance (önem) yazısı arasına boşluk ko
629
629
630
630
</Solution>
631
631
632
-
#### Bir dizi `? :`operatörünü`if` ifadesi ve değişkenler ile değiştir {/*refactor-a-series-of---to-if-and-variables*/}
632
+
#### Bir dizi `? :`sözdizimini`if` ifadesi ve değişkenler ile değiştir {/*refactor-a-series-of---to-if-and-variables*/}
633
633
634
634
`Drink` bileşeni, `name` prop'unun `"tea"` ya da `"coffee"` olduğuna bağlı olarak farklı bilgiler göstermek için bir dizi ? : koşulunu kullanır. Buradaki sorun her içecek hakkındaki bilgilerin birden fazla koşula bağlı olmasıdır. Bu kodu üç tane `? :` koşulu yerine tek bir `if` ifadesi kullanacak şekilde yeniden düzenleyin.
0 commit comments