Skip to content

Commit d2c3f4e

Browse files
Merge pull request #23 from gergely-nagy/fragments
Fragments translation
2 parents 8eaa082 + f3a4bf7 commit d2c3f4e

File tree

1 file changed

+29
-29
lines changed

1 file changed

+29
-29
lines changed

content/docs/fragments.md

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
id: fragments
3-
title: Fragments
3+
title: Töredékek
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+
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.
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.
21+
Létezik egy új [rövid szintaxis](#short-syntax) is a deklarálásukhoz.
2222

23-
## Motivation {#motivation}
23+
## Motiváció {#motivation}
2424

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:
2626

2727
```jsx
2828
class Table extends React.Component {
@@ -38,91 +38,91 @@ 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+
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.
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>Helló</td>
49+
<td>Világ</td>
5050
</div>
5151
);
5252
}
5353
}
5454
```
5555

56-
results in a `<Table />` output of:
56+
a következő `<Table />` kimenetet eredményezi:
5757

5858
```jsx
5959
<table>
6060
<tr>
6161
<div>
62-
<td>Hello</td>
63-
<td>World</td>
62+
<td>Helló</td>
63+
<td>Világ</td>
6464
</div>
6565
</tr>
6666
</table>
6767
```
6868

69-
Fragments solve this problem.
69+
A töredékek ezt a problémát oldják meg.
7070

71-
## Usage {#usage}
71+
## Használat {#usage}
7272

7373
```jsx{4,7}
7474
class Columns extends React.Component {
7575
render() {
7676
return (
7777
<React.Fragment>
78-
<td>Hello</td>
79-
<td>World</td>
78+
<td>Helló</td>
79+
<td>Világ</td>
8080
</React.Fragment>
8181
);
8282
}
8383
}
8484
```
8585

86-
which results in a correct `<Table />` output of:
86+
ami a következő helyes `<Table />` kimenetet eredményezi:
8787

8888
```jsx
8989
<table>
9090
<tr>
91-
<td>Hello</td>
92-
<td>World</td>
91+
<td>Helló</td>
92+
<td>Világ</td>
9393
</tr>
9494
</table>
9595
```
9696

97-
### Short Syntax {#short-syntax}
97+
### Rövid szintaxis {#short-syntax}
9898

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:
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>Helló</td>
107+
<td>Világ</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+
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.
115115

116-
### Keyed Fragments {#keyed-fragments}
116+
### Kulcsot használó töredékek {#keyed-fragments}
117117

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:
119119

120120
```jsx
121121
function Glossary(props) {
122122
return (
123123
<dl>
124124
{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
126126
<React.Fragment key={item.id}>
127127
<dt>{item.term}</dt>
128128
<dd>{item.description}</dd>
@@ -133,8 +133,8 @@ function Glossary(props) {
133133
}
134134
```
135135

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.
137137

138-
### Live Demo {#live-demo}
138+
### Élő demó {#live-demo}
139139

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

Comments
 (0)