diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 33619db2f..227af6ce5 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -1,10 +1,10 @@ --- id: fragments -title: Fragments +title: Töredékek permalink: docs/fragments.html --- -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. +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. ```js render() { @@ -18,11 +18,11 @@ render() { } ``` -There is also a new [short syntax](#short-syntax) for declaring them. +Létezik egy új [rövid szintaxis](#short-syntax) is a deklarálásukhoz. -## Motivation {#motivation} +## Motiváció {#motivation} -A common pattern is for a component to return a list of children. Take this example React snippet: +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: ```jsx class Table extends React.Component { @@ -38,91 +38,91 @@ class Table extends React.Component { } ``` -`` would need to return multiple `` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of ``, then the resulting HTML will be invalid. +A ``-nak több `` elemet kell visszaadnia hogy a megjelenített HTML érvényes legyen. Ha egy szülő div-et használunk a `` komponens `render()` metódusában, akkor az eredményül kapott HTML érvénytelen lesz. ```jsx class Columns extends React.Component { render() { return (
- Hello - World + Helló + Világ
); } } ``` -results in a `` output of: +a következő `
` kimenetet eredményezi: ```jsx
-
- + +
HelloWorldHellóVilág
``` -Fragments solve this problem. +A töredékek ezt a problémát oldják meg. -## Usage {#usage} +## Használat {#usage} ```jsx{4,7} class Columns extends React.Component { render() { return ( - Hello - World + Helló + Világ ); } } ``` -which results in a correct `` output of: +ami a következő helyes `
` kimenetet eredményezi: ```jsx
- - + +
HelloWorldHellóVilág
``` -### Short Syntax {#short-syntax} +### Rövid szintaxis {#short-syntax} -There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags: +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: ```jsx{4,7} class Columns extends React.Component { render() { return ( <> - Hello - World + Helló + Világ ); } } ``` -You can use `<>` the same way you'd use any other element except that it doesn't support keys or attributes. +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. -### Keyed Fragments {#keyed-fragments} +### Kulcsot használó töredékek {#keyed-fragments} -Fragments declared with the explicit `` 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: +A töredékek, amik a `` 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: ```jsx function Glossary(props) { return (
{props.items.map(item => ( - // Without the `key`, React will fire a key warning + // 'key' nélkül a React figyelmeztetést fog dobni
{item.term}
{item.description}
@@ -133,8 +133,8 @@ function Glossary(props) { } ``` -`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. +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. -### Live Demo {#live-demo} +### Élő demó {#live-demo} -You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). +Ebben a [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)-ben kipróbálhatod az új JSX töredék szintaxist.