Voorwaardelijke weergave en loops in React

Het renderen van voorwaarden en loops in React wordt gedaan met behulp van voorwaardelijke instructies en lusstructuren in JSX.

 

1. Weergavevoorwaarden

- Gebruik: u kunt de structuur in JSX gebruiken om een ​​voorwaarde te controleren en verschillende elementen weer te geven op basis van die voorwaarde. if-else if-else

For voorbeeld:

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

- De ternaire operator gebruiken: U kunt ook de ternaire operator gebruiken om de structuur in JSX in te korten. if-else

For voorbeeld:

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

- De logische &&-operator gebruiken: Als u een element alleen wilt weergeven als een voorwaarde waar is, kunt u de logische &&-operator gebruiken.

For voorbeeld:

{isLoggedIn && <WelcomeUser />}

 

2. Loops renderen

- Gebruik: u kunt de methode gebruiken om een ​​array te herhalen en overeenkomstige elementen in JSX weer te geven. map map

For voorbeeld

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

- Een lus gebruiken for: u kunt ook een for lus gebruiken om een ​​array te herhalen en overeenkomstige elementen in JSX weer te geven.

For voorbeeld:

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

- Elk gebruiken for: u kunt ook de for methode Each gebruiken om een ​​array te herhalen en overeenkomstige elementen in JSX weer te geven.

For voorbeeld:

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

 

Met voorwaarden en loops in React kunt u flexibele en dynamische gebruikersinterfaces maken. Door voorwaardelijke instructies en lusstructuren in JSX te gebruiken, kunt u verschillende elementen weergeven en lijsten genereren op basis van gegevens in uw React toepassing.