Skip to content

Commit 0498e43

Browse files
authored
Merge pull request #81 from ebrugulec/fragments
Translate Fragments Page
2 parents 90e9866 + 85b9dd2 commit 0498e43

File tree

1 file changed

+23
-23
lines changed

1 file changed

+23
-23
lines changed

content/docs/fragments.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
id: fragments
3-
title: Fragments
3+
title: Fragment'ler
44
permalink: docs/fragments.html
55
---
66

7-
A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
7+
React'teki ortak model, bir bileşenin birden fazla öğe döndürmesidir. Fragmentler, Dom'a ekstra düğüm eklemeden bir alt elemanlar listesini gruplandırmanıza izin verir.
88

99
```js
1010
render() {
@@ -18,11 +18,11 @@ render() {
1818
}
1919
```
2020

21-
There is also a new [short syntax](#short-syntax) for declaring them, but it isn't supported by all popular tools yet.
21+
Onları tanımlamak için yeni bir [kısa sözdizimi](#short-syntax) de vardır, ancak henüz tüm popüler araçlar tarafından desteklenmemektedir.
2222

2323
## Motivation {#motivation}
2424

25-
A common pattern is for a component to return a list of children. Take this example React snippet:
25+
Bir bileşenin alt eleman listesini döndürmesi için yaygın bir modeldir. Örnek için bu React kod parçasına bakın.
2626

2727
```jsx
2828
class Table extends React.Component {
@@ -38,22 +38,22 @@ class Table extends React.Component {
3838
}
3939
```
4040

41-
`<Columns />` would need to return multiple `<td>` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of `<Columns />`, then the resulting HTML will be invalid.
41+
Oluşturulan HTML'in geçerli olması için `<Columns />` birden fazla `<td>` öğesini döndürmesi gerekir. Bir üst div `<Columns />` bileşeninin `render()` metodu içinde kullanılmışsa, sonuçta ortaya çıkan HTML geçersiz olacaktır.
4242

4343
```jsx
4444
class Columns extends React.Component {
4545
render() {
4646
return (
4747
<div>
48-
<td>Hello</td>
49-
<td>World</td>
48+
<td>Merhaba</td>
49+
<td>Dünya</td>
5050
</div>
5151
);
5252
}
5353
}
5454
```
5555

56-
results in a `<Table />` output of:
56+
`<Table />` çıktısının sonucu:
5757

5858
```jsx
5959
<table>
@@ -66,7 +66,7 @@ results in a `<Table />` output of:
6666
</table>
6767
```
6868

69-
Fragments solve this problem.
69+
Fragmentler bu sorunu çözer.
7070

7171
## Usage {#usage}
7272

@@ -75,56 +75,56 @@ class Columns extends React.Component {
7575
render() {
7676
return (
7777
<React.Fragment>
78-
<td>Hello</td>
79-
<td>World</td>
78+
<td>Merhaba</td>
79+
<td>Dünya</td>
8080
</React.Fragment>
8181
);
8282
}
8383
}
8484
```
8585

86-
which results in a correct `<Table />` output of:
86+
`<Table />` çıktısının doğru sonucu:
8787

8888
```jsx
8989
<table>
9090
<tr>
91-
<td>Hello</td>
92-
<td>World</td>
91+
<td>Merhaba</td>
92+
<td>Dünya</td>
9393
</tr>
9494
</table>
9595
```
9696

9797
### Short Syntax {#short-syntax}
9898

99-
There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:
99+
Fragmentleri tanımlamak için kullanabileceğiniz yeni, daha kısa bir sözdizimi var. Boş etiketlere benziyor:
100100

101101
```jsx{4,7}
102102
class Columns extends React.Component {
103103
render() {
104104
return (
105105
<>
106-
<td>Hello</td>
107-
<td>World</td>
106+
<td>Merhaba</td>
107+
<td>Dünya</td>
108108
</>
109109
);
110110
}
111111
}
112112
```
113113

114-
You can use `<></>` the same way you'd use any other element except that it doesn't support keys or attributes.
114+
Anahtarları veya nitelikleri desteklememesi dışında, diğer elementleri kullandığınız gibi `<></>` kullanabilirsiniz.
115115

116-
Note that **[many tools don't support it yet](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** so you might want to explicitly write `<React.Fragment>` until the tooling catches up.
116+
Not, **[birçok araç henüz desteklemiyor](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**. Bu nedenle, destekleninceye kadar `<React.Fragment>` yazmak isteyebilirsiniz.
117117

118118
### Keyed Fragments {#keyed-fragments}
119119

120-
Fragments declared with the explicit `<React.Fragment>` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list:
120+
Açıkça belirtilen `<React.Fragment>` sözdiziminin anahtarları olabilir. Bunun için bir kullanım durumu, bir koleksiyonun bir fragmentler dizisine eşlenmesidir. -- örneğin, bir açıklama listesi oluşturmak için:
121121

122122
```jsx
123123
function Glossary(props) {
124124
return (
125125
<dl>
126126
{props.items.map(item => (
127-
// Without the `key`, React will fire a key warning
127+
// `key` olmadan, React önemli bir uyarıyı tetikler
128128
<React.Fragment key={item.id}>
129129
<dt>{item.term}</dt>
130130
<dd>{item.description}</dd>
@@ -135,8 +135,8 @@ function Glossary(props) {
135135
}
136136
```
137137

138-
`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers.
138+
`key`, `Fragment`'e iletilebilecek tek özelliktir. Gelecekte, olay yöneticileri gibi ek özellikler için destek ekleyebiliriz.
139139

140140
### Live Demo {#live-demo}
141141

142-
You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
142+
Bununla yeni JSX fragment sözdizimini deneyebilirsiniz [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).

0 commit comments

Comments
 (0)