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: content/docs/fragments.md
+19-19Lines changed: 19 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
1
---
2
2
id: fragments
3
-
title: Fragments
3
+
title: Fraqmentlər
4
4
permalink: docs/fragments.html
5
5
---
6
6
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-də ümumi pattern çoxlu elementlərə komponentin qayıtması üçündür. Fraqmentlər sizə DOM-a nodelar əlavə etmədən uşaqların siyahısını qruplaşdırmağa imkan 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
+
Burada həmçinin onları bəyan etmək üçün yeni [qısa sintaksis](#short-syntax)var, amma bu hələki bütün məşhur alətlər tərəfindən dəstəklənmir.
22
22
23
-
## Motivation {#motivation}
23
+
## Motivasiya {#motivation}
24
24
25
-
A common pattern is for a component to return a list of children. Take this example React snippet:
25
+
Komponentlərdə uşaqlar siyahısını qaytarmaq çox işlənən bir patterndir. React-in kod parçası misalına baxın:
26
26
27
27
```jsx
28
28
classTableextendsReact.Component {
@@ -38,7 +38,7 @@ 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
+
Render edilmiş HTML-in etibarlı olması üçün `<Columns />`çoxsaylı `<td>`elementlərinə qayıtmalı ola bilərlər. Əgər valideyn div `<Columns />`-un `render()`-inin daxilində istifadə olunubsa, onda nəticələnən HTML etibarsızdır.
42
42
43
43
```jsx
44
44
classColumnsextendsReact.Component {
@@ -53,7 +53,7 @@ class Columns extends React.Component {
53
53
}
54
54
```
55
55
56
-
results in a `<Table />`output of:
56
+
yekun `<Table />`nəticəsi:
57
57
58
58
```jsx
59
59
<table>
@@ -66,9 +66,9 @@ results in a `<Table />` output of:
66
66
</table>
67
67
```
68
68
69
-
Fragments solve this problem.
69
+
Fraqmentlər bu problemi həll edir.
70
70
71
-
## Usage {#usage}
71
+
## İstifadə {#usage}
72
72
73
73
```jsx{4,7}
74
74
class Columns extends React.Component {
@@ -83,7 +83,7 @@ class Columns extends React.Component {
83
83
}
84
84
```
85
85
86
-
which results in a correct `<Table />`output of:
86
+
hansıki düzgün `<Table />`nəticəsi ilə yekunlaşacaq:
87
87
88
88
```jsx
89
89
<table>
@@ -94,9 +94,9 @@ which results in a correct `<Table />` output of:
94
94
</table>
95
95
```
96
96
97
-
### Short Syntax {#short-syntax}
97
+
### Qısa Sintaksis {#short-syntax}
98
98
99
-
There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:
99
+
Fraqmentləri bəyan etmək üçün yeni qısa sintaksis istifadə edə bilərsiniz. Bu boş təqlərə bənzəyir:
100
100
101
101
```jsx{4,7}
102
102
class Columns extends React.Component {
@@ -111,20 +111,20 @@ class Columns extends React.Component {
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
+
Siz `<></>`digər elementləri işlətdiyiniz üsulla istifadə edə bilərsiniz, yalnız bu açarları və atributları dəstəkləmir.
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
+
Nəzərə alın ki, **[çox alətlər hələki bunu dəstəkləmir](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**. Beləliklə, siz `<React.Fragment>`açıq şəkildə alətlər dəstəkləyənə qədər yazmaq istəyə bilərsiniz.
117
117
118
-
### Keyed Fragments {#keyed-fragments}
118
+
### Açarlı Fraqmentlər {#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çıq `<React.Fragment>`sintaksisi ilə bəyan olunmuş fraqmentlərin açarları ola bilər. Buna misal kolleksiyanın fraqmentlər massivi ilə uzlaşdırılması ola bilər -- məsələn, təsvir siyahısının yaratmaq:
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`-siz React açar xəbərdarlığı göndərəcək
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`tək atributdur ki, `Fragment`-ə ötürülə bilər. Gələcəkdə biz dəstək üçün hadisə işləyiciləri kimi əlavə atributlar əlavə edə bilərik.
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
+
Siz yeni JSX fraqment sintaksisini [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000) ilə yoxlaya bilərsiniz.
0 commit comments