Ehdollinen renderöinti ja silmukat sisään React

Renderöintiehdot ja silmukat React tehdään JSX:n ehdollisten lausekkeiden ja silmukkarakenteiden avulla.

 

1. Renderöintiolosuhteet

- Käyttö: Voit käyttää JSX:n rakennetta ehdon tarkistamiseen ja eri elementtien hahmontamiseen sen perusteella. if-else if-else

For esimerkki:

function List({ list }) {  
  if(!list) {  
    return null;  
  }  
  
  if(!list.length) {  
    return <p>Sorry.</p>;  
  } else {  
    return( 
      <div>  
        {list.map(item => <ListItem item={item} />)}  
      </div>  
   );  
  }  
}

- Kolmiosaisen operaattorin käyttö: Voit myös käyttää kolmiosaista operaattoria lyhentääksesi rakennetta JSX:ssä. if-else

For esimerkki:

 {isLoggedin ? <WelcomeUser />: <Login />}

- Loogisen &&-operaattorin käyttäminen: Kun haluat näyttää elementin vain, jos ehto on tosi, voit käyttää loogista &&-operaattoria.

For esimerkki:

{isLoggedIn && <WelcomeUser />}

 

2. Renderöintisilmukat

- Käyttämällä: Voit käyttää menetelmää iteroidaksesi taulukon yli ja hahmontaaksesi vastaavat elementit JSX:ssä. map map

For esimerkki

 {users.map((user) =>( 
       <li key={user.id}>{user.name}</li>  
))}

- for Silmukan käyttäminen: Voit myös käyttää for silmukkaa iteroidaksesi taulukon yli ja hahmontaaksesi vastaavat elementit JSX:ssä.

For esimerkki:

let usersList = [];
for(let i = 0; i < users.length; i++) {  
  usersList.push(<li key={users[i].id}>{users[i].name}</li>);  
}  
return <ul>{usersList}</ul>;  

- Kunkin käyttäminen for: Voit myös käyttää for Jokainen-metodia iteroidaksesi taulukon yli ja hahmontaaksesi vastaavat elementit JSX:ssä.

For esimerkki:

let usersList = [];  
users.forEach((user) => {  
  usersList.push(<li key={user.id}>{user.name}</li>);  
});  
return <ul>{usersList}</ul>;

 

Ehtojen ja silmukoiden avulla React voit luoda joustavia ja dynaamisia käyttöliittymiä. Käyttämällä ehdollisia lauseita ja silmukkarakenteita JSX:ssä voit näyttää erilaisia ​​elementtejä ja luoda luetteloita sovelluksesi tietojen perusteella React.