Skip to content

Commit c7b187e

Browse files
committed
translate react-dom-api
1 parent a8c69e1 commit c7b187e

File tree

1 file changed

+40
-37
lines changed

1 file changed

+40
-37
lines changed

content/docs/reference-react-dom.md

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,53 +6,56 @@ category: Reference
66
permalink: docs/react-dom.html
77
---
88

9-
If you load React from a `<script>` tag, these top-level APIs are available on the `ReactDOM` global. If you use ES6 with npm, you can write `import ReactDOM from 'react-dom'`. If you use ES5 with npm, you can write `var ReactDOM = require('react-dom')`.
9+
Amennyiben a Reactet egy <script> tag segítségével töltöd be, ezek a legfelsőbb szintű API-k a `ReactDOM` globális változón keresztül lesznek elérhetőek. ES6 és npm esetében írhatod ezt: import ReactDOM from 'react-dom'. ES5 és npm esetében pedig írhatod az következőt: var ReactDOM = require('react-dom').
1010

11-
## Overview {#overview}
11+
## Áttekintés {#overview}
1212

13-
The `react-dom` package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to. Most of your components should not need to use this module.
13+
A `react-dom` csomag DOM specifikus metódusokkal szolgál amiket az alkalmazásod legfelsőbb szintjén használhatsz, valamint egy menekülési utat is biztosít a React modellen kívülre, ha erre lenne szükséged. A legtöbb komponensednek nem lesz szüksége erre a modulra.
1414

15-
- [`render()`](#render)
16-
- [`hydrate()`](#hydrate)
17-
- [`unmountComponentAtNode()`](#unmountcomponentatnode)
18-
- [`findDOMNode()`](#finddomnode)
19-
- [`createPortal()`](#createportal)
15+
- [Áttekintés {#overview}](#%c3%81ttekint%c3%a9s-overview)
16+
- [Böngésző támogatás {#browser-support}](#b%c3%b6ng%c3%a9sz%c5%91-t%c3%a1mogat%c3%a1s-browser-support)
17+
- [Referencia {#reference}](#referencia-reference)
18+
- [`render()` {#render}](#render-render)
19+
- [`hydrate()` {#hydrate}](#hydrate-hydrate)
20+
- [`unmountComponentAtNode()` {#unmountcomponentatnode}](#unmountcomponentatnode-unmountcomponentatnode)
21+
- [`findDOMNode()` {#finddomnode}](#finddomnode-finddomnode)
22+
- [`createPortal()` {#createportal}](#createportal-createportal)
2023

21-
### Browser Support {#browser-support}
24+
### Böngésző támogatás {#browser-support}
2225

23-
React supports all popular browsers, including Internet Explorer 9 and above, although [some polyfills are required](/docs/javascript-environment-requirements.html) for older browsers such as IE 9 and IE 10.
26+
A React az összes népszerű böngészőt támogatja, az Internet Explorer 9-től kezdve, bár régebbi böngészők esetében, mint az IE 9 és IE 10, [néhány polyfill megkövetelt](/docs/javascript-environment-requirements.html).
2427

25-
> Note
28+
> Megjegyzés
2629
>
27-
> We don't support older browsers that don't support ES5 methods, but you may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page. You're on your own if you choose to take this path.
30+
> Olyan régi böngészőket amik nem támogatják az ES5 metódusokat nem támogatunk, de elképzelhető, hogy polyfillek mint az [es5-shim és es5-sham](https://github.com/es-shims/es5-shim) oldalba illesztésével a kód működni fog régebbi böngészőkben is. Ha ezt az utat választod, magadra vagy utalva.
2831
2932
* * *
3033

31-
## Reference {#reference}
34+
## Referencia {#reference}
3235

3336
### `render()` {#render}
3437

3538
```javascript
3639
ReactDOM.render(element, container[, callback])
3740
```
3841

39-
Render a React element into the DOM in the supplied `container` and return a [reference](/docs/more-about-refs.html) to the component (or returns `null` for [stateless components](/docs/components-and-props.html#function-and-class-components)).
42+
Egy React elemet renderel a DOM-ba a megadott `container`-be és egy komponens [referenciát](/docs/more-about-refs.html) ad vissza (vagy [állapot nélküli komponensek](/docs/components-and-props.html#function-and-class-components) esetében `null` értéket).
4043

41-
If the React element was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.
44+
Ha a React elem korábban egy `container`-be lett renderelve, akkor ezen egy frissítést fog végrehajtani, és csak a DOM azon részeit fogja megváltoztatni amik ahhoz szükségesek hogy a DOM tükrözze a legújabb React elemet.
4245

43-
If the optional callback is provided, it will be executed after the component is rendered or updated.
46+
Ha az opcionális visszahívó függvény meg van adva, ez akkor lesz meghívva, amikor a komponens renderelt, vagy frissített.
4447

45-
> Note:
48+
> Megjegyzés:
4649
>
47-
> `ReactDOM.render()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.
50+
> A `ReactDOM.render()` kontrollálja a megadott konténer csomópont tartalmát. Bármiféle korábbról meglévő DOM elem ki lesz cserélve az első meghívás alkalmával. A későbbi meghívások a React DOM diffing algoritmusát használnak a hatékony frissítésekért.
4851
>
49-
> `ReactDOM.render()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
52+
> A `ReactDOM.render()` nem módosítja a konténer csomópontot (csak a konténer gyermekeit). Egy komponenst lehetséges egy DOM csomópontba úgy beilleszteni, hogy az ne módosítsa a meglévő gyermekeket.
5053
>
51-
> `ReactDOM.render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy
52-
> and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root `ReactComponent` instance, the preferred solution is to attach a
53-
> [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) to the root element.
54+
> A `ReactDOM.render()` jelenleg egy referenciát ad vissza a gyökér `ReactComponent` példányhoz. Azonban ennek a visszaadott értéknek a használata örökölt/elavult viselkedés
55+
> és a használata elkerülendő, mivel a jövőbeli React verziók néhány esetben aszinkron módon renderelhetnek komponenseket. Ha szükséged van egy referenciára a gyökér `ReactComponent` példányhoz, a preferált megoldás ha egy
56+
> [visszahívó ref](/docs/more-about-refs.html#the-ref-callback-attribute)-et kapcsolt a gyökérelemhez.
5457
>
55-
> Using `ReactDOM.render()` to hydrate a server-rendered container is deprecated and will be removed in React 17. Use [`hydrate()`](#hydrate) instead.
58+
> A `ReactDOM.render()` használata szerver oldali renderelés hidrálásához elavultnak számít és a React 17-ben el lesz távolítva. Ehelyett használd a [`hydrate()`](#hydrate) metódust.
5659
5760
* * *
5861

@@ -62,15 +65,15 @@ If the optional callback is provided, it will be executed after the component is
6265
ReactDOM.hydrate(element, container[, callback])
6366
```
6467

65-
Same as [`render()`](#render), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.
68+
Ugyanaz mint a [`render()`](#render), de azon konténer HTML tartalmának hidrálásához használt, amit a [`ReactDOMServer`](/docs/react-dom-server.html) renderelt. A React megkísérel eseményhallgatókat hozzácsatolni a meglévő sémához.
6669

67-
React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
70+
A React arra számít hogy a renderelt tartalom megegyezik a szerveren és a kliensen. Habár el tud simítani különbségeket a szövegtartalomban, de az eltéréseket kezeld hibákként és javítsd ki őket. Fejlesztői módban hidrálás közben a React figyelmeztet az eltérésekről. Arra, hogy az attribútum különbségek is ki lesznek javítva nincs garancia. Ez a teljesítmény szempontjából fontos, mivel a legtöbb alkalmazásban az eltérések ritkák és ezért a teljes séma validálása meglehetősen drága lenne.
6871

69-
If a single element's attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the warning by adding `suppressHydrationWarning={true}` to the element. It only works one level deep, and is intended to be an escape hatch. Don't overuse it. Unless it's text content, React still won't attempt to patch it up, so it may remain inconsistent until future updates.
72+
Ha egy szimpla elem attribútuma vagy szövegtartalma elkerülhetetlenül különbözne a szerver és a kliens közt (például időbélyegek), akkor elnémíthatod a figyelmeztetést a `suppressHydrationWarning={true}` elemhez való hozzáadásával. Ez csak egy szint mélységig működik és csak egy menekülő útnak van szánva. Ne használd túl sokat. Hacsak nem szövegtartalom, a React még mindig nem fogja megkísérelni megfoltozni, így ez jövőbeni frissítésekig inkonzisztens maradhat.
7073

71-
If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a state variable like `this.state.isClient`, which you can set to `true` in `componentDidMount()`. This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. Note that this approach will make your components slower because they have to render twice, so use it with caution.
74+
Ha szándékosan szeretnél valamit renderelni ami eltért a szerveren és a kliensen, használhatsz kétmenetes renderelést. Azon komponensek amik mást renderelnek a kliensen tudnak olasni például egy `this.state.isClient` változót, amit `true` értékre állíthatsz a `componentDidMount()` metódusban. Így a kezdetleges renderelés ugyanazt a tartalmat rendereli mint a szerver, az eltéréseket elkerülve, de egy második menet is be fog következni szinkron módon rögtön a hidrálás után. Jegyezd meg, hogy ez a módszer lassabbá teszi a komponenseidet mivel kétszer kell renderelniük, szóval csak óvatosan használd.
7275

73-
Remember to be mindful of user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so if you render something different in the client-only pass, the transition can be jarring. However, if executed well, it may be beneficial to render a "shell" of the application on the server, and only show some of the extra widgets on the client. To learn how to do this without getting the markup mismatch issues, refer to the explanation in the previous paragraph.
76+
Gondolj kellően a lassú internetléréssel rendelkezők felhasználói élményére. A JavaScript kód akár jelentősen később is töltődhet be mint a kezdetleges HTML render, szóval ha valami eltérőt renderelsz a csak kliens oldali menetben, az átmenet csikorgós lehet. Azonban ha jól van végrehajtva, előnyös lehet a szerveren egy "vázat" renderelni az alkalmazásnak, és csupán néhány extra modult kell mutatni a kliensen. Az előző bekezdés magyarázatából megtudhatod, hogy ezt hogyan lehet sémabeli eltérési hibák nélkül megtenni.
7477

7578
* * *
7679

@@ -80,28 +83,28 @@ Remember to be mindful of user experience on slow connections. The JavaScript co
8083
ReactDOM.unmountComponentAtNode(container)
8184
```
8285

83-
Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
86+
Egy létrehozott React komponenst választ le a DOM-ról először kitakarítva az eseménykezelőket és az állapotát. Ha a komponens nem lett létrehozva a konténerben, ennek a függvénynek a meghívása nem tesz semmit. Ha a komponens le lett választva `true` értéket ad vissza, ha nem volt komponens amit le kellett választani, akkor pedig `false` értéket.
8487

8588
* * *
8689

8790
### `findDOMNode()` {#finddomnode}
8891

89-
> Note:
92+
> Megjegyzés:
9093
>
91-
> `findDOMNode` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. [It has been deprecated in `StrictMode`.](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
94+
> A `findDOMNode` egy menekülési út ami alsóbbrendű DOM csomópontok eléréséhez szolgált. A legtöbb esetben ennek a használata nem ajánlott, mert rést üt a komponens absztrakcióján. [`StrictMode`-ban elavultnak lett minősítve.](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
9295
9396
```javascript
9497
ReactDOM.findDOMNode(component)
9598
```
96-
If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. **In most cases, you can attach a ref to the DOM node and avoid using `findDOMNode` at all.**
99+
Ha a komponens létre lett hozva a DOM-ban ez a megegyező natív böngészőbeli DOM elemet adja vissza. Ez a metódus hasznos lehet értékek kiolvasására a DOM-ból, mint például űrlap mezők értékei, vagy DOM számítások végrehajtása. **A legtöbb esetben hozzácsatolhatsz egy refet a DOM csomóponthoz és teljes mértékben elkerülheted a `findDOMNode` használatát.**
97100

98-
When a component renders to `null` or `false`, `findDOMNode` returns `null`. When a component renders to a string, `findDOMNode` returns a text DOM node containing that value. As of React 16, a component may return a fragment with multiple children, in which case `findDOMNode` will return the DOM node corresponding to the first non-empty child.
101+
Amikor egy komponens `null` vagy `false` értéket renderel, a `findDOMNode` `null` értéket ad vissza. Ha a komponens egy sztinggé renderelődik, a `findDOMNode` egy text DOM csomópontot ad vissza ami ennek értéket tartalmazza. A React 16 óta egy komponens egy több gyermekből álló töredéket is visszaadhat. Ebben az esetben a `findDOMNode` az első megegyező nem üres gyermek DOM csomópontját adja vissza.
99102

100-
> Note:
103+
> Megjegyzés:
101104
>
102-
> `findDOMNode` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.
105+
> A `findDOMNode` csak létrehozott komponenseken működik (tehát olyan kompnenseken, amik a DOM-ba lettek helyezve). Ha egy olyan komponensen próbálod meghívni ami még nem lett létrehozva (például olyan komponens `render()` metódusában próbálod meghívni a `findDOMNode()`-t ami még nem lett létrehozva) egy kivétel lesz dobva.
103106
>
104-
> `findDOMNode` cannot be used on function components.
107+
> A `findDOMNode` nem használható függvény komponenseken.
105108
106109
* * *
107110

@@ -111,4 +114,4 @@ When a component renders to `null` or `false`, `findDOMNode` returns `null`. Whe
111114
ReactDOM.createPortal(child, container)
112115
```
113116

114-
Creates a portal. Portals provide a way to [render children into a DOM node that exists outside the hierarchy of the DOM component](/docs/portals.html).
117+
Egy portált hoz létre. A portálok [olyan DOM csomópontba való gyermekek renderelését teszik lehetővé, amik kívül esnek a DOM komponens hierarchiáján](/docs/portals.html).

0 commit comments

Comments
 (0)