Reageer lyste


In React sal jy lyste met een of ander tipe lus weergee.

Die JavaScript map()-skikkingmetode is oor die algemeen die voorkeurmetode.

As jy 'n opknapping nodig het oor die map()metode, kyk na die ES6-afdeling .


Voorbeeld:

Kom ons gee al die motors uit ons motorhuis weer:

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'));

Wanneer jy hierdie kode in jou create-react-app, sal dit werk, maar jy sal 'n waarskuwing ontvang dat daar geen "sleutel" verskaf is vir die lysitems nie.


w3schools CERTIFIED . 2022

Word gesertifiseer!

Voltooi die React-modules, doen die oefeninge, neem die eksamen en word w3schools-gesertifiseer!!

$95 INSKRIF

Sleutels

Sleutels laat React toe om tred te hou met elemente. Op hierdie manier, as 'n item opgedateer of verwyder word, sal slegs daardie item weer gelewer word in plaas van die hele lys.

Sleutels moet uniek aan elke broer of suster wees. Maar hulle kan wêreldwyd gedupliseer word.

Oor die algemeen moet die sleutel 'n unieke ID wees wat aan elke item toegeken is. As 'n laaste uitweg kan jy die skikkingsindeks as 'n sleutel gebruik.

Voorbeeld:

Kom ons herfaktor ons vorige voorbeeld om sleutels in te sluit:

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'));


Toets jouself met oefeninge

Oefening:

Voeg die kenmerk by wat React toelaat om tred te hou met elemente in lyste.

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'));