We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

Listák és kulcsok

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React and include live examples:

Először is vegyük át hogyan alakítunk át listákat JavaScript-ben.

Vegyük az alábbi kódot. A map() függvény fog egy számokkal teli tömböt (numbers) és megduplázza annak értékeit. A map() által visszaadott új tömböt hozzárendeljük a doubled változóhoz, és kiírjuk a konzolba:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

Ez a kód a [2, 4, 6, 8, 10] tömböt írja ki a konzolba.

A React-ben tömböket elemlistákká majdnem ugyanígy transzformálunk.

Komponensek többszöri renderelése

Elemkollekciókat kapcsos zárójelek segítségével {} készíthetsz és illeszthetsz JSX-be.

Az alábbiakban egy numbers tömbön iterálunk végig a map() függvény használatával. Minden elemhez visszaadunk egy <li> elemet. Végül hozzárendeljük a kapott elemek tömbjét a listItems-hez:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>  <li>{number}</li>);

A listItems tömböt belefoglaljuk egy <ul> elembe, és azt a DOM-ba rendereljük:

<ul>{listItems}</ul>

Próbáld ki a CodePen-en

Ez a kód egy pontokba szedett számlistát mutat 1-től 5-ig.

Alap lista komponens

Listákat általában egy komponensbe szeretnénk renderelni.

Az előző példát át tudjuk alakítani egy komponenssé, ami fogad egy numbers tömböt, és egy elemlistát ad vissza.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>    <li>{number}</li>  );  return (
    <ul>{listItems}</ul>  );
}

const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);

Ha ezt a kódot futtatod, egy figyelmeztetést fogsz kapni, hogy minden listaelemnek rendelkeznie kell egy kulccsal. A “key” (kulcs) egy speciális szöveges attribútum, amit fel kell vegyél ha listaelemeket készítesz. A következő szekcióban megbeszéljük hogy ez miért is fontos.

Rendeljünk hozzá egy key-t a listaelemeinkhez a numbers.map()-en belül, hogy kijavítsuk a kulcs problémát.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

Próbáld ki a CodePen-en

Kulcsok

A kulcsok segítenek a React-nek azonosítani, hogy mely elemek változtak, lettek hozzáadva, vagy épp törölve. A kulcsokat a tömbön belül kell az elemekhez hozzárendelnünk a stabil azonosíthatóság érdekében:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>    {number}
  </li>
);

A legjobb módja egy kulcs választásának ha egy szöveget használunk, ami egyedien azonosít egy listaelemet annak testvérei között. Leggyakrabban az adatod ID azonosítókulcsa lehet a legjobb kulcs:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>    {todo.text}
  </li>
);

Ha nincs egy stabil ID azonosítókulcsod a renderelt elemekhez, akkor használhatod az elemindexet is kulcsként utolsó lehetőségként:

const todoItems = todos.map((todo, index) =>
  // Csak akkor tedd ezt, ha nincs egy stabil ID azonosítókulcsod  <li key={index}>    {todo.text}
  </li>
);

Ha az elemek sorrendje változhat, akkor nem ajánljuk indexek használatát kulcsként. Ez negatívan hathat ki a teljesítményre és problémákat okozhat a komponens állapotában. Nézd meg Robin Pokorny’ cikkét egy mélyebbre ható magyarázatért, az index mint kulcs használatáról. Ha úgy döntesz, hogy nem rendelsz egy explicit kulcsot a listaelemekhez, a React automatikusan az indexet fogja kulcsként használni.

Itt egy mélyebbre ható magyarázat, hogy miért is fontosak a kulcsok ha többet szeretnél tanulni.

Komponensek kivonása kulcsokkal

A kulcsoknak csak a környező tömb kontextusában van értelmük.

Például ha kivonsz egy ListItem komponenst, a kulcsot a <ListItem /> elemen kell hogy tartsd, nem pedig áttenni azt az <li> elemre a ListItem-en belül.

Példa: Helytelen kulcshasználat

function ListItem(props) {
  const value = props.value;
  return (
    // Hibás! Itt a kulcs definiálásának nincs semmi értelme:    <li key={value.toString()}>      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Hibás! A kulcsot itt kell definiálni:    <ListItem value={number} />  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

Példa: Helyes kulcshasználat

function ListItem(props) {
  // Helyes! Itt a kulcs definiálásának nincs semmi értelme:  return <li>{props.value}</li>;}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Helyes! A kulcsot itt kell definiálni:    <ListItem key={number.toString()} value={number} />  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

Próbáld ki a CodePen-en

Egy jó ökölszabály, hogy a map()-en belül lévő minden elemnek rendelkeznie kell egy kulccsal.

A kulcsoknak csak testvéreik között kell egyedinek lenniük

A kulcsoknak egyedinek kell lenniük testvéreik között. Azonban nem kell, hogy globálisan is egyediek legyenek. Ugyanazokat a kulcsokat használhatjuk két különböző tömb készítése esetén:

function Blog(props) {
  const sidebar = (    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>    <div key={post.id}>      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}      <hr />
      {content}    </div>
  );
}

const posts = [
  {id: 1, title: 'Helló, világ', content: 'Üdövzlünk a React tanulói kurzusában!'},
  {id: 2, title: 'Telepítés', content: 'A React-et npm-ből tudod telepíteni.'}
];

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Blog posts={posts} />);

Próbáld ki a CodePen-en

A kulcsok a React számára szolgálnak utalásként, de leküldve nem lesznek a komponenseidnek. Ha ugyanarra az értékre van szükséged a komponensedben is, akkor azt egy másik prop névvel is explicit módon meg kell adnod:

const content = posts.map((post) =>
  <Post
    key={post.id}    id={post.id}    title={post.title} />
);

A fenti példával a Post komponens olvasni tudja props.id-t, de a props.key-t nem.

map() JSX-be ágyazása

A fenti példákban külön deklaráltuk a listItems változót és belevettük azt a JSX-be:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>    <ListItem key={number.toString()}              value={number} />  );  return (
    <ul>
      {listItems}
    </ul>
  );
}

A JSX lehetővé teszi bármilyen kifejezés beágyazását kapcsos zárójelek között, így a map() eredményét is:

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>        <ListItem key={number.toString()}                  value={number} />      )}    </ul>
  );
}

Próbáld ki a CodePen-en

Ennek néha tisztább kód az eredménye, de ezzel a stílussal könnyű visszaélni. Ahogy a JavaScript-ben is, tőled függ hogy megéri-e kivonni egy változót az olvashatóság érdekében. Tartsd észben hogy ha a map() teste túl beágyazott, talán itt az ideje kivonni egy komponenst.

Hasznos volt ez az oldal?Az oldal szerkesztése