Seznamy reakcí


V Reactu budete vykreslovat seznamy s nějakým typem smyčky.

Metoda pole JavaScript map()je obecně preferovanou metodou.

Pokud si tuto map()metodu potřebujete zopakovat, podívejte se na sekci ES6 .


Příklad:

Pojďme si vykreslit všechna auta z naší garáže:

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car brand={car} />)}
      </ul>
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Když tento kód spustíte ve svém create-react-app, bude fungovat, ale obdržíte varování, že pro položky seznamu není poskytnut žádný "klíč".


w3schools CERTIFIED . 2022

Získejte certifikaci!

Dokončete moduly React, proveďte cvičení, udělejte zkoušku a získejte certifikaci w3schools!!

95 $ PŘIHLÁSIT SE

Klíče

Klávesy umožňují Reactu sledovat prvky. Tímto způsobem, pokud je položka aktualizována nebo odstraněna, bude znovu vykreslena pouze tato položka namísto celého seznamu.

Klíče musí být jedinečné pro každého sourozence. Ale mohou být duplikovány globálně.

Obecně by klíčem mělo být jedinečné ID přiřazené každé položce. Jako poslední možnost můžete jako klíč použít index pole.

Příklad:

Pojďme refaktorovat náš předchozí příklad tak, aby zahrnoval klíče:

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = [
    {id: 1, brand: 'Ford'},
    {id: 2, brand: 'BMW'},
    {id: 3, brand: 'Audi'}
  ];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
      </ul>
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));


Otestujte se pomocí cvičení

Cvičení:

Přidejte atribut, který umožňuje Reactu sledovat prvky v seznamech.

function GroceryList() {
  const items = [
    {id: 1, name: 'bread'},
    {id: 2, name: 'milk'},
    {id: 3, name: 'eggs'}
  ];

  return (
    <>
      <h1>Grocery List</h1>
      <ul>
        {items.map((item) => <li ={item.id}>{item.name}</li>)}
      </ul>
    </>
  );
}

ReactDOM.render(<GroceryList />, document.getElementById('root'));