Feltételes renderelés és hurkok React

A renderelési feltételek és ciklusok React a JSX-ben feltételes utasítások és ciklusszerkezetek használatával történnek.

 

1. Renderelés feltételei

- Használata: A JSX struktúrájával ellenőrizheti a feltételt, és a feltétel alapján különböző elemeket jeleníthet meg. if-else if-else

For példa:

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

- A háromtagú operátor használata: A háromtagú operátort a JSX szerkezetének lerövidítésére is használhatja. if-else

For példa:

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

- A logikai && operátor használata: Ha csak akkor szeretne egy elemet megjeleníteni, ha egy feltétel igaz, használhatja a logikai && operátort.

For példa:

{isLoggedIn && <WelcomeUser />}

 

2. Rendering hurkok

- Használata: A metódus segítségével egy tömbön keresztül iterálhat, és a megfelelő elemeket renderelheti JSX-ben. map map

For példa

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

- Cikk használata for: Használhat for hurkot is a tömbön való iterációhoz és a megfelelő elemek megjelenítéséhez a JSX-ben.

For példa:

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

- Mindegyik használata for: Használhatja az for Each metódust is egy tömbön való iterációhoz és a megfelelő elemek megjelenítéséhez JSX-ben.

For példa:

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

 

A feltételek és a hurkok React lehetővé teszik rugalmas és dinamikus felhasználói felületek létrehozását. A feltételes utasítások és ciklusstruktúrák használatával a JSX-ben különböző elemeket jeleníthet meg, és listákat hozhat létre az alkalmazásban lévő adatok alapján React.