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/reference-react.md
+27-27Lines changed: 27 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ redirect_from:
13
13
- "docs/top-level-api-zh-CN.html"
14
14
---
15
15
16
-
A `React` a belépési pont a React könyvtárba. Ha a React-t egy `<script>` tag segítségével töltöd be, ezek a legfelsőbb szintű API-k a `React` globális változón keresztül lesznek elérhetőek. ES6 és npm esetében írhatod ezt: `import React from 'react'`. ES5 és npm esetében pedig írhatod az következőt: `var React = require('react')`.
16
+
A `React` a belépési pont a React könyvtárba. Amennyiben a Reactet egy <script> tag segítségével töltöd be, ezek a legfelsőbb szintű API-k a `React` globális változón keresztül lesznek elérhetőek. ES6 és npm esetében írhatod ezt: import React from 'react'. ES5 és npm esetében pedig írhatod az következőt: var React = require('react').
17
17
18
18
## Áttekintés {#overview}
19
19
@@ -24,20 +24,20 @@ A React komponensek segítéségével a kezelőfelületet feldarabolhatod függe
24
24
-[`React.Component`](#reactcomponent)
25
25
-[`React.PureComponent`](#reactpurecomponent)
26
26
27
-
Ha nem használsz ES6 osztályokat, használhatod a `create-react-class` modult. Több információért lásd: [A React használata ES6 nélkül](/docs/react-without-es6.html).
27
+
Ha nem használsz ES6 osztályokat, használhatod a `create-react-class` modult. Több információért lásd: [A React használata ES6 nélkül](/docs/react-without-es6.html) fejezetet.
28
28
29
29
A React komponensek függvényekként is definiálhatóak, amiket be is tudunk csomagolni:
30
30
31
31
-[`React.memo`](#reactmemo)
32
32
33
33
### React elemek készítése {#creating-react-elements}
34
34
35
-
Ahhoz hogy leírd hogyan is nézzen ki a kezelőfelületed, a [JSX használatát](/docs/introducing-jsx.html) ajánljuk. Minden JSX elem csak szintaktikus cukor a [`React.createElement()`](#createelement) meghívásához. Ha JSX-t használsz, a következő metódusokat nem fogod közvetlenül meghívni.
35
+
A kezelőfelületed leírásához a [JSX használatát](/docs/introducing-jsx.html) ajánljuk. Minden JSX elem csak szintaktikus cukor a [`React.createElement()`](#createelement) meghívásához. Ha JSX-t használsz, a következő metódusokat nem fogod közvetlenül meghívni.
36
36
37
37
-[`createElement()`](#createelement)
38
38
-[`createFactory()`](#createfactory)
39
39
40
-
Több információért lásd: [A React használata JSX nélkül](/docs/react-without-jsx.html).
40
+
Több információért lásd a [React JSX nélkül](/docs/react-without-jsx.html) fejezetet.
41
41
42
42
### Elemek transzformálása {#transforming-elements}
43
43
@@ -49,18 +49,18 @@ A `React` több API-t is kínál elemek manipulálásához:
49
49
50
50
### Töredékek {#fragments}
51
51
52
-
A `React` szolgáltat egy komponenst is több elem rendereléséhez egy csomagoló komponens nélkül.
52
+
Ahhoz, hogy több elemet tudj egyszerre renderelni anélkül hogy azokat becsomagolnád egy másik komponensbe, a `React` egy saját komponenst szolgáltat.
53
53
54
54
-[`React.Fragment`](#reactfragment)
55
55
56
-
### Ref-ek {#refs}
56
+
### Refek {#refs}
57
57
58
58
-[`React.createRef`](#reactcreateref)
59
59
-[`React.forwardRef`](#reactforwardref)
60
60
61
61
### Felfüggesztés {#suspense}
62
62
63
-
A Suspense lehetővé teszi a komponenseknek, hogy "várjanak" valamire renderelés előtt. Jelenleg a Suspense csak egy esetben használható: [komponensek dinamikus beöltése`React.lazy` segítségével](/docs/code-splitting.html#reactlazy). A jövőben más esetek is támogatottak lesznek, mint például az adatlehívás.
63
+
A Suspense lehetővé teszi hogy a komponensek "várni tudjanak" valamire renderelés előtt. A Suspense jelenleg csak egy esetben használható: [komponensek dinamikus betöltése`React.lazy` segítségével](/docs/code-splitting.html#reactlazy). A jövőben más forgatókönyvek is támogatva lesznek, mint például az adatlehívás.
64
64
65
65
-[`React.lazy`](#reactlazy)
66
66
-[`React.Suspense`](#reactsuspense)
@@ -106,11 +106,11 @@ Ha egy listát szeretnél a `React.Component` osztály metódusairól és tulajd
106
106
107
107
A `React.PureComponent` hasonló a [`React.Component`](#reactcomponent)-hez. A különbség annyi, hogy a [`React.Component`](#reactcomponent) nem implementálja a [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) metódust, míg a `React.PureComponent` igen, egy sekély prop és állapot összehasonlítással.
108
108
109
-
Ha a React komponensed `render()` függvénye ugyanazt az eredményt rendereli ugyanazon prop-ok és állapot esetében, akkor néhány esetben használhatod a `React.PureComponent`-t a teljesítmény fokozása érdekében.
109
+
Ha a React komponensed `render()` függvénye ugyanazt az eredményt rendereli ugyanazon propok és állapot esetében, akkor néhány esetben használhatod a `React.PureComponent`-t a teljesítmény fokozása érdekében.
110
110
111
111
> Megjegyzés
112
112
>
113
-
> A `React.PureComponent``shouldComponentUpdate()` metódusa csak sekély objektum összehasonlítást végez. Ha az objektumok komplex adatstruktúrákat tartalmaznak, az hamisan negatívat eredményezhet mélyebb különbségek esetében. Csak akkor terjessz ki a `PureComponent`-el, ha egyszerű propokra és állapotra számítasz, vagy használd a [`forceUpdate()`](/docs/react-component.html#forceupdate) metódust ha tudod hogy a mély adatstruktúrák megváltoztak. Vagy vedd fontolóra [megváltoztathatatlan objektumok](https://facebook.github.io/immutable-js/) használatát a beágyazott adatok gyors összehasonlításának megkönnyítése érdekében.
113
+
> A `React.PureComponent``shouldComponentUpdate()` metódusa csak sekély objektum összehasonlítást végez. Ha az objektumok komplex adatstruktúrákat tartalmaznak, az hamisan negatívat eredményezhet mélyebb különbségek esetében. Csak akkor terjessz ki a `PureComponent`-el, ha egyszerű propokra és állapotra számítasz, vagy használd a [`forceUpdate()`](/docs/react-component.html#forceupdate) metódust ha tudod hogy a mély adatstruktúrák megváltoztak. Vagy vedd fontolóra [megváltoztathatatlan objektumok](https://facebook.github.io/immutable-js/) használatát a mélyebb adatstruktúrák gyors összehasonlításának megkönnyítése érdekében.
114
114
>
115
115
> Továbbá a `React.PureComponent``shouldComponentUpdate()` metódusa kihagyja a prop frissítéseket a komponens teljes alfája esetén. Bizonyosodj meg róla, hogy a komponens minden gyermeke szintúgy "tiszta" (pure).
116
116
@@ -138,7 +138,7 @@ function areEqual(prevProps, nextProps) {
138
138
/*
139
139
abban az esetben ha a nextProps-ot a rendernek átadva
140
140
ugyanazt az eredményt kapnánk mint a prevProps esetében,
141
-
adj vissza true értéket
141
+
adj vissza true értéket,
142
142
máskülönben pedig false-t
143
143
*/
144
144
}
@@ -149,7 +149,7 @@ Ez a metódus csakis **[a teljesítmény optimalizálása](/docs/optimizing-perf
149
149
150
150
> Megjegyzés
151
151
>
152
-
> A [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) osztálykomponens metódussal ellentétben, az `areEqual` függvény `true` értéket ad vissza, ha a prop-ok egyenlőek, és `false` értéket ha nem azok. Ez a `shouldComponentUpdate` inverze.
152
+
> A [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) osztálykomponens metódussal ellentétben, az `areEqual` függvény `true` értéket ad vissza, ha a propok egyenlőek, és `false` értéket ha nem azok. Ez a `shouldComponentUpdate` inverze.
153
153
154
154
* * *
155
155
@@ -165,7 +165,7 @@ React.createElement(
165
165
166
166
Egy adott típusú [React elemet](/docs/rendering-elements.html) készít és ad vissza. A type argumentum lehet egy címke név sztring (mint például `'div'` vagy `'span'`), egy [React komponens](/docs/components-and-props.html) típus (akár osztály vagy függvény), vagy egy [React töredék](#reactfragment) típus.
167
167
168
-
A [JSX](/docs/introducing-jsx.html)-ben írt kód konvertálva lesz, hogy a `React.createElement()`-et használja. Ha JSX-et használsz, a `React.createElement()`-et tipikusan nem kell közvetlenül meghívnod. Nézd meg a [React JSX nélkül](/docs/react-without-jsx.html) fejezetet ha többet akarsz tanulni.
168
+
A [JSX](/docs/introducing-jsx.html)-ben írt kód át lesz konvertálva, hogy az a `React.createElement()`-et használja. Ha JSX-et használsz, a `React.createElement()`-et tipikusan nem kell közvetlenül meghívnod. Nézd meg a [React JSX nélkül](/docs/react-without-jsx.html) fejezetet ha többet akarsz megtudni.
169
169
170
170
* * *
171
171
@@ -179,15 +179,15 @@ React.cloneElement(
179
179
)
180
180
```
181
181
182
-
Egy `element`-et alapul véve egy új React elemet klónoz és ad vissza. A keletkezett elem rendelkezni fog az eredeti elem és az új propok sekély összefonásával. Az új gyermekek átveszik a meglévő gyermekek helyét. A `key` és `ref` meg lesz tartva az eredeti elemből.
182
+
Egy `element`-et alapul véve egy új React elemet klónoz és ad vissza. A keletkezett elem rendelkezni fog az eredeti elem és az új propok sekély összefonásával. Az új gyermekek átveszik a meglévő gyermekek helyét. A `key` és `ref`attribútumok meg lesznek tartva az eredeti elemből.
183
183
184
184
A `React.cloneElement()` majdnem ekvivalens ezzel:
De a `ref`-eket is megőrzi. Ez azt jelenti, hogy ha egy olyan gyermeket kapsz ami rendelkezik `ref`-el, akkor azt nem fogod véletlenül sem ellopni az ősöktől. Az új elemhez ugyanaz a `ref` lesz hozzákapcsolva.
190
+
De a `ref` attribútumokat is megőrzi. Ez azt jelenti, hogy ha egy olyan gyermeket kapsz ami rendelkezik `ref`-el, akkor azt nem fogod véletlenül sem ellopni az ősöktől. Az új elemhez ugyanaz a `ref` lesz hozzákapcsolva.
191
191
192
192
Ez az API az elavult `React.addons.cloneWithProps()` leváltására lett létrehozva.
193
193
@@ -201,9 +201,9 @@ React.createFactory(type)
201
201
202
202
Egy függvényt ad vissza ami bizonyos típusú React elemeket produkál. Mint ahogy a [`React.createElement()`](#createelement) esetében is, a type argumentum lehet egy címke név sztring (mint például `'div'` vagy `'span'`), egy [React komponens](/docs/components-and-props.html) típus (akár osztály vagy függvény), vagy egy [React töredék](#reactfragment) típus.
203
203
204
-
Ez a segédfüggvény egy korábbi, örökölt függvénynek számít, és arra biztatunk hogy használj vagy JSX-et, vagy közvetlenül a `React.createElement()`-et.
204
+
Ez a segédfüggvény egy korábbról örökölt függvénynek számít, és arra biztatunk hogy inkább használj JSX-et, vagy közvetlenül a `React.createElement()`-et.
205
205
206
-
Ha JSX-et használsz, a `React.createFactory()`-t általában nem fogod közvetlenül meghívni. Nézd meg a [React JSX nélkül](/docs/react-without-jsx.html) fejezetet ha többet akarsz tanulni.
206
+
Ha JSX-et használsz, a `React.createFactory()`-t általában nem fogod közvetlenül meghívni. Nézd meg a [React JSX nélkül](/docs/react-without-jsx.html) fejezetet ha többet akarsz megtudni.
207
207
208
208
* * *
209
209
@@ -227,7 +227,7 @@ A `React.Children` segédeszközként szolgál ha a nem áttetsző `this.props.c
227
227
React.Children.map(children, function[(thisArg)])
228
228
```
229
229
230
-
Egy függvényt hív meg a `this`-t `thisArg`-ra állítva a `children` minden közvetlen gyermekén. Ha a `children` egy tömb, akkor azon végigmenve a függvény minden gyermeken a tömbben meg lesz hívva. Ha a children `null` vagy `undefined` értékű, ez a metódus `null` vagy `undefined` értéket ad vissza egy tömb helyett.
230
+
Egy függvényt hív meg a `this`-t `thisArg`-ra állítva a `children` minden közvetlen gyermekén. Ha a `children` egy tömb, akkor azt bejárva a függvény minden gyermeken meg lesz hívva. Ha a children `null` vagy `undefined` értékű, ez a metódus `null` vagy `undefined` értéket ad vissza egy tömb helyett.
231
231
232
232
> Megjegyzés
233
233
>
@@ -259,15 +259,15 @@ Azt ellenőrzi, hogy a `children`-nek csak egy gyermeke van-e (egy React elembő
259
259
260
260
> Megjegyzés:
261
261
>
262
-
>A`React.Children.only()` nem fogadja el a [`React.Children.map()`](#reactchildrenmap) visszaadott értékét, mert az egy tömb, mintsem egy React elem.
262
+
>A`React.Children.only()` nem fogadja el a [`React.Children.map()`](#reactchildrenmap) visszaadott értékét, mert az egy tömb, nem pedig egy React elem.
A nem áttetsző `children` adatstruktúrát adja vissza egy lapos tömbként, egy kulcsot rendelve minden gyermekhez. Hasznos lehet ha gyermekek kollekcióját akarod manipulálni a render metódusodban, különösen ha új sorba akarod rendezni, vagy le akarsz vágni a `this.props.children`-ből mielőtt azt lejjebb adod.
270
+
A nem áttetsző `children` adatstruktúrát adja vissza egy lapos tömbként, egy kulcsot rendelve minden gyermekhez. Hasznos lehet ha gyermekek listáját akarod manipulálni a render metódusodban, különösen ha át akarod rendezni, vagy le akarsz vágni a `this.props.children`-ből mielőtt azt lejjebb adod.
271
271
272
272
> Megjegyzés:
273
273
>
@@ -300,10 +300,10 @@ A `React.createRef` egy [ref](/docs/refs-and-the-dom.html)-et hoz létre amit a
300
300
301
301
### `React.forwardRef` {#reactforwardref}
302
302
303
-
A`React.forwardRef` egy React komponenst hoz létre ami továbbadja a [ref](/docs/refs-and-the-dom.html) attribútumot amit kap egy másik komponensnek lejjebb a komponensfában. Ez nem egy gyakori alkalmazás, de két speciális esetben hasznos tud lenni:
303
+
A`React.forwardRef` egy React komponenst hoz létre ami továbbadja a [ref](/docs/refs-and-the-dom.html) attribútumot amit kap egy másik komponensnek lejjebb a komponensfában. Ezt nem gyakran kell alkalmazni, de két speciális esetben hasznos tud lenni:
304
304
305
305
* [Refek továbbítása DOM elemeknek](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)
306
-
* [Refek továbbítása magasabb fokú komponenseknek](/docs/forwarding-refs.html#forwarding-refs-in-higher-order-components)
A`React.forwardRef` egy renderelő függvényt fogad argumentumként. A React ezt a függvényt hívja meg a `props` és `ref`argumentumokkal. Ez a függvény egy React csomópontot kell hogy visszaadjon.
309
309
@@ -317,7 +317,7 @@ További információért nézd meg a [refek továbbítása](/docs/forwarding-re
317
317
318
318
### `React.lazy` {#reactlazy}
319
319
320
-
A`React.lazy()`lehetővé teszi számodra hogy egy olyan komponenst definiálj, ami dinamikusan lesz betöltve. Ez segít csökkenteni az összecsomagolt kód méretét úgy, hogy a kezdetleges renderelés által nem használt komponensek betöltése késleltetve vannak.
320
+
A`React.lazy()`segítségével egy dinamikusan betöltődő komponenst tudsz definiálni. Ez segít csökkenteni az összecsomagolt kód méretét úgy, hogy a kezdetleges renderelés által nem használt komponensek betöltése késleltetve lesznek.
321
321
322
322
A használatáról többet tanulhatsz a [kód felvágás dokumentációban](/docs/code-splitting.html#reactlazy). Valószínűleg [ezt a cikket](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d) is megnézheted, ami részletesebben is elmagyarázza a használatot.
323
323
@@ -326,15 +326,15 @@ A használatáról többet tanulhatsz a [kód felvágás dokumentációban](/doc
Jegyezd meg hogy a `lazy` komponensek renderelése megköveteli, hogy legyen egy `<React.Suspense>` komponens valahol feljebb a komponensfában. Így tudsz megadni egy betöltés indikátort.
329
+
Jegyezd meg, hogy a `lazy` komponensek renderelése megköveteli, hogy valahol feljebb a komponensfában legyen egy `<React.Suspense>`. Így tudsz megadni egy betöltés indikátort.
330
330
331
331
>**Megjegyzés**
332
332
>
333
333
>A`React.lazy` használata dinamikus import segítségével megköveteli hogy a Promise objektum elérhető legyen a JS környezetben. Ez IE11 és az alatt egy polyfill használatát követeli meg.
334
334
335
335
### `React.Suspense` {#reactsuspense}
336
336
337
-
A`React.Suspense`lehetővé teszi számodra, hogy egy betöltés indikátort tudj megadni abban az esetben ha néhány komponens a komopnensfában lejjebb még nem áll készen renderelésre. Jelenleg a `<React.Suspense>`**egyetlen** használati módja a lustán betöltő komponensek.
337
+
A`React.Suspense`segítségével egy betöltés indikátort tudsz megadni abban az esetben ha néhány komponens a komponensfában lejjebb még nem áll készen renderelésre. Jelenleg a `<React.Suspense>`**egyetlen** használati módja a lustán betöltő komponensek.
338
338
339
339
```js
340
340
// Ez a komponens dinamikusan van betöltve
@@ -352,10 +352,10 @@ function MyComponent() {
352
352
}
353
353
```
354
354
355
-
A [kód felvágó útmutatónkban](/docs/code-splitting.html#reactlazy) ez dokumentálva van. Jegyezd meg, hogy a `lazy` (lusta) komponensek lehetnek mélyen a `Suspense` fában -- nem kell mindegyiket egyesével körbevenni. A legjobb gyakorlat ha a `<Suspense>`-t oda helyezed ahol egy betöltés indikátort akarsz látni, a `lazy()`-t pedig ott, ahol kódot akarsz felvágni.
355
+
A [kód felvágó útmutatónkban](/docs/code-splitting.html#reactlazy) ez dokumentálva van. Jegyezd meg, hogy a `lazy` (lusta) komponensek lehetnek mélyen a `Suspense` fában -- nem kell mindegyiket egyesével körbevenni. A legjobb gyakorlat ha a `<Suspense>`-t oda helyezed ahol egy betöltés indikátort akarsz látni, a `lazy()`-t pedig oda ahol kódot akarsz felvágni.
356
356
357
-
Bár ez jelenleg még nem támogatott, a jövőben a `Suspense` több forgatókönyvet fog támogatni, mint például adatlekérést. Erről az [ütemtervünkben](/blog/2018/11/27/react-16-roadmap.html) olvashatsz.
357
+
Bár ez jelenleg még nem támogatott, a jövőben a `Suspense` több forgatókönyvet fog támogatni, mint például adatlehívást. Erről az [ütemtervünkben](/blog/2018/11/27/react-16-roadmap.html) olvashatsz.
358
358
359
359
>Megjegyzés:
360
360
>
361
-
>A`React.lazy()` és `<React.Suspense>` még nem támogatottak a `ReactDOMServer` által. Ez egy köztudott limitáció, ami a jövőben kerül megoldásra.
361
+
>A`ReactDOMServer` még nem támogatja a `React.lazy()`-t és a `<React.Suspense>`-t. Ez egy köztudott limitáció, ami a jövőben kerül megoldásra.
0 commit comments