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
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.
8
8
9
9
```js
10
10
render() {
@@ -18,11 +18,11 @@ render() {
18
18
}
19
19
```
20
20
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.
22
22
23
23
## Motivation {#motivation}
24
24
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.
26
26
27
27
```jsx
28
28
classTableextendsReact.Component {
@@ -38,22 +38,22 @@ class Table extends React.Component {
38
38
}
39
39
```
40
40
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.
42
42
43
43
```jsx
44
44
classColumnsextendsReact.Component {
45
45
render() {
46
46
return (
47
47
<div>
48
-
<td>Hello</td>
49
-
<td>World</td>
48
+
<td>Merhaba</td>
49
+
<td>Dünya</td>
50
50
</div>
51
51
);
52
52
}
53
53
}
54
54
```
55
55
56
-
results in a `<Table />`output of:
56
+
`<Table />`çıktısının sonucu:
57
57
58
58
```jsx
59
59
<table>
@@ -66,7 +66,7 @@ results in a `<Table />` output of:
66
66
</table>
67
67
```
68
68
69
-
Fragments solve this problem.
69
+
Fragmentler bu sorunu çözer.
70
70
71
71
## Usage {#usage}
72
72
@@ -75,56 +75,56 @@ class Columns extends React.Component {
75
75
render() {
76
76
return (
77
77
<React.Fragment>
78
-
<td>Hello</td>
79
-
<td>World</td>
78
+
<td>Merhaba</td>
79
+
<td>Dünya</td>
80
80
</React.Fragment>
81
81
);
82
82
}
83
83
}
84
84
```
85
85
86
-
which results in a correct `<Table />`output of:
86
+
`<Table />`çıktısının doğru sonucu:
87
87
88
88
```jsx
89
89
<table>
90
90
<tr>
91
-
<td>Hello</td>
92
-
<td>World</td>
91
+
<td>Merhaba</td>
92
+
<td>Dünya</td>
93
93
</tr>
94
94
</table>
95
95
```
96
96
97
97
### Short Syntax {#short-syntax}
98
98
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:
100
100
101
101
```jsx{4,7}
102
102
class Columns extends React.Component {
103
103
render() {
104
104
return (
105
105
<>
106
-
<td>Hello</td>
107
-
<td>World</td>
106
+
<td>Merhaba</td>
107
+
<td>Dünya</td>
108
108
</>
109
109
);
110
110
}
111
111
}
112
112
```
113
113
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.
115
115
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.
117
117
118
118
### Keyed Fragments {#keyed-fragments}
119
119
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:
121
121
122
122
```jsx
123
123
functionGlossary(props) {
124
124
return (
125
125
<dl>
126
126
{props.items.map(item=> (
127
-
//Without the `key`, React will fire a key warning
127
+
// `key` olmadan, React önemli bir uyarıyı tetikler
128
128
<React.Fragment key={item.id}>
129
129
<dt>{item.term}</dt>
130
130
<dd>{item.description}</dd>
@@ -135,8 +135,8 @@ function Glossary(props) {
135
135
}
136
136
```
137
137
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.
139
139
140
140
### Live Demo {#live-demo}
141
141
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