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
+
Egy általános minta a React-ben, hogy egy komponens több elemet ad vissza. A töredékek segítenek gyermekek listáját csoportosítani anélkül, hogy új csomópontot adnál a DOM-hoz.
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.
21
+
Létezik egy új [rövid szintaxis](#short-syntax)is a deklarálásukhoz.
22
22
23
-
## Motivation {#motivation}
23
+
## Motiváció {#motivation}
24
24
25
-
A common pattern is for a component to return a list of children. Take this example React snippet:
25
+
Komponensek esetében gyakori minta, hogy az gyermekek listájával térjen vissza. Vegyük példának ezt a React kódrészletet:
26
26
27
27
```jsx
28
28
classTableextendsReact.Component {
@@ -38,91 +38,91 @@ 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
+
A `<Columns />`-nak több `<td>`elemet kell visszaadnia hogy a megjelenített HTML érvényes legyen. Ha egy szülő div-et használunk a `<Columns />` komponens `render()`metódusában, akkor az eredményül kapott HTML érvénytelen lesz.
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>Helló</td>
49
+
<td>Világ</td>
50
50
</div>
51
51
);
52
52
}
53
53
}
54
54
```
55
55
56
-
results in a `<Table />`output of:
56
+
a következő `<Table />`kimenetet eredményezi:
57
57
58
58
```jsx
59
59
<table>
60
60
<tr>
61
61
<div>
62
-
<td>Hello</td>
63
-
<td>World</td>
62
+
<td>Helló</td>
63
+
<td>Világ</td>
64
64
</div>
65
65
</tr>
66
66
</table>
67
67
```
68
68
69
-
Fragments solve this problem.
69
+
A töredékek ezt a problémát oldják meg.
70
70
71
-
## Usage {#usage}
71
+
## Használat {#usage}
72
72
73
73
```jsx{4,7}
74
74
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>Helló</td>
79
+
<td>Világ</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
+
ami a következő helyes `<Table />`kimenetet eredményezi:
87
87
88
88
```jsx
89
89
<table>
90
90
<tr>
91
-
<td>Hello</td>
92
-
<td>World</td>
91
+
<td>Helló</td>
92
+
<td>Világ</td>
93
93
</tr>
94
94
</table>
95
95
```
96
96
97
-
### Short Syntax {#short-syntax}
97
+
### Rövid szintaxis {#short-syntax}
98
98
99
-
There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:
99
+
Van egy új, rövidebb szintaxis, amit a töredékek deklarálásához használhatsz. Úgy néz ki, mint az üres címkék:
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>Helló</td>
107
+
<td>Világ</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
+
Ugyanúgy használhatod a`<></>`-t, mint ahogy más elemeket is, azzal a különbséggel, hogy ez nem támogatja a kulcsokat és az attribútumokat.
115
115
116
-
### Keyed Fragments {#keyed-fragments}
116
+
### Kulcsot használó töredékek {#keyed-fragments}
117
117
118
-
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:
118
+
A töredékek, amik a `<React.Fragment>`szintaxissal vannak deklarálva tartalmazhatnak kulcsokat. Ennek az egyik felhasználási módja egy kollekció leképezése töredékek tömbre -- például egy leíráslista létrehozására:
119
119
120
120
```jsx
121
121
functionGlossary(props) {
122
122
return (
123
123
<dl>
124
124
{props.items.map(item=> (
125
-
//Without the `key`, React will fire a key warning
125
+
//'key' nélkül a React figyelmeztetést fog dobni
126
126
<React.Fragment key={item.id}>
127
127
<dt>{item.term}</dt>
128
128
<dd>{item.description}</dd>
@@ -133,8 +133,8 @@ function Glossary(props) {
133
133
}
134
134
```
135
135
136
-
`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.
136
+
A `key`az egyetlen olyan attribútum, amelyet át lehet adni egy`Fragment`-nek. A jövőben további attribútumok, például eseménykezelők is támogatást kaphatnak.
137
137
138
-
### Live Demo {#live-demo}
138
+
### Élő demó {#live-demo}
139
139
140
-
You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
140
+
Ebben a [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)-ben kipróbálhatod az új JSX töredék szintaxist.
0 commit comments