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
`ProductTable` (lavanta) öğesine bakarsanız, tablo başlığının ("İsim" ve "Fiyat" etiketlerini içeren kısım) kendi bileşeni olmadığını görürsünüz. Bu bir tercih meselesidir ve her iki şekilde de yapılabilir. Bu örnekte, başlık kısmı `ProductTable`'ın bir parçasıdır, çünkü `ProductTable` listesinin içinde görünüyor. Ancak, bu başlık kısmı karmaşık hale gelirse (örneğin, sıralama özelliği eklerseniz), onu kendi `ProductTableHeader` bileşenine taşıyabilirsiniz.
64
64
65
-
Tasarım modelinizdeki bileşenleri tanımladığınıza göre, bunları bir hiyerarşi içinde düzenleyin. Modelde başka bir bileşen içinde görünen bileşenler, hiyerarşide bir alt öğe olarak görünmelidir:
65
+
Tasarım taslağınızdaki bileşenleri tanımladığınıza göre, bunları bir hiyerarşi içinde düzenleyin. Tasarım taslağında başka bir bileşen içinde görünen bileşenler, hiyerarşide bir alt öğe olarak görünmelidir:
66
66
67
67
*`FilterableProductTable`
68
68
*`SearchBar`
@@ -204,7 +204,7 @@ Bu noktada, herhangi bir state değeri kullanmamalısınız. Onun için bir sonr
204
204
205
205
</Pitfall>
206
206
207
-
## Step 3: Arayüzün minimal (ancak eksiksiz) halini belirleme {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/}
207
+
## Adım 3: Arayüzün minimal (ancak eksiksiz) halini belirleme {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/}
208
208
209
209
Kullanıcı arayüzünüzü etkileşimli hale getirmek için, kullanıcılarınızın temel veri modelinizi değiştirmesine izin vermeniz gerekir. Bunun için *state* kullanacaksınız.
210
210
@@ -247,11 +247,11 @@ Prop'lar ve state farklıdır, ancak birlikte çalışırlar. Bir üst bileşen
247
247
248
248
</DeepDive>
249
249
250
-
## Step 4: State’inizin barınacağı yeri belirleyin {/*step-4-identify-where-your-state-should-live*/}
250
+
## Adım 4: State’inizin barınacağı yeri belirleyin {/*step-4-identify-where-your-state-should-live*/}
251
251
252
252
Uygulamanızın minimum state verisini belirledikten sonra, bu state'i değiştirmekten sorumlu olan veya state'e *sahip olan* bileşeni belirlemeniz gerekir. Unutmayın: React, veriyi yukarıdan aşağıya doğru tek yönlü olarak (one-way data flow) aktarır. Bu yüzden, hangi bileşenin hangi state'i sahipleneceği hemen net olmayabilir. Bu konseptle yeni tanışıyorsanız bu zor olabilir, ancak aşağıdaki adımları takip ederek çözebilirsiniz!
253
253
254
-
Uyguamanızdaki her state parçası için:
254
+
Uygulamanızdaki her state parçası için:
255
255
256
256
1. State'e bağlı olarak bir şeyler render eden *her* bileşeni belirleyin.
257
257
2. O bileşenlere en yakın ortak üst bileşeni bulun (Hiyerarşide hepsinin üstünde olan bir bileşen).
@@ -446,7 +446,7 @@ You provided a \`value\` prop to a form field without an \`onChange\` handler. T
446
446
447
447
<ConsoleBlock level="error">
448
448
449
-
Bir form alanına \`value\` prop'u verdiniz; ancak bir \`onChange\`handler'ı sağlamadınız. Bu salt-okunur bir form alanı oluşturacaktır.
449
+
Bir form alanına \`value\` prop'u verdiniz; ancak bir \`onChange\`işleyicisi sağlamadınız. Bu salt-okunur bir form alanı oluşturacaktır.
450
450
451
451
</ConsoleBlock>
452
452
@@ -466,9 +466,9 @@ function SearchBar({ filterText, inStockOnly }) {
466
466
467
467
Ancak henüz kullanıcı eylemlerine (yazmak gibi) yanıt vermek için herhangi bir kod eklemediniz. Bu da son adımınız olacak.
468
468
469
-
## Step 5: Ters veri akışı ekleyin {/*step-5-add-inverse-data-flow*/}
469
+
## Adım 5: Ters veri akışı ekleyin {/*step-5-add-inverse-data-flow*/}
470
470
471
-
Uygulumanız şu anda, prop'lar ve state'in hiyerarşi boyunca aşağı doğru akmasıyla, doğru bir şekilde render ediliyor. Ancak kullanıcı girdisine göre state'i değiştirmek için, ters istikametteki veri akışını da desteklenmeniz gerekemktedir. Hiyerarşinin derinliklerindeki form bileşenlerinin `FilterableProductTable` bileşenindeki state'i güncellemesi gerekecek.
471
+
Uygulamanız şu anda, prop'lar ve state'in hiyerarşi boyunca aşağı doğru akmasıyla, doğru bir şekilde render ediliyor. Ancak kullanıcı girdisine göre state'i değiştirmek için, ters istikametteki veri akışını da desteklemeniz gerekecektir. Hiyerarşinin derinliklerindeki form bileşenlerinin `FilterableProductTable` bileşenindeki state'i güncellemesi gerekecek.
472
472
473
473
React bu veri akışını açıkça yapar, ancak iki-yönlü veri bağlamaya göre biraz daha fazla kod yazmanızı gerektirir. Yukarıdaki örnekte yazı yazmaya veya kutuyu işaretlemeye çalışırsanız, React girdinizi görmezden gelir. Bu kasıtlıdır. `<input value={filterText} />` yazarak, `input`'un `value` prop'unu her zaman `FilterableProductTable`'dan iletilem `filterText` state'ine eşit olarak ayarladınız. `filterText` state'i hiçbir zaman değişmediği için, input hiçbir zaman değişmez.
0 commit comments