Sąlyginis atvaizdavimas ir kilpos React

Atvaizdavimo sąlygos ir ciklai React atliekami naudojant sąlyginius sakinius ir ciklo struktūras JSX.

 

1. Atvaizdavimo sąlygos

- Naudojimas: galite naudoti JSX struktūrą norėdami patikrinti sąlygą ir pateikti skirtingus elementus pagal tą sąlygą. if-else if-else

For pavyzdys:

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

- Naudoti trijų dalių operatorių: taip pat galite naudoti trijų dalių operatorių, kad sutrumpintumėte JSX struktūrą. if-else

For pavyzdys:

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

- Naudojant loginį && operatorių: kai norite rodyti elementą tik tada, kai sąlyga yra teisinga, galite naudoti loginį && operatorių.

For pavyzdys:

{isLoggedIn && <WelcomeUser />}

 

2. Atvaizdavimo kilpos

- Naudojimas: galite naudoti šį metodą, norėdami kartoti masyvą ir pateikti atitinkamus elementus JSX. map map

For pavyzdys

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

- Ciklo naudojimas for: taip pat galite naudoti for ciklą, norėdami kartoti masyvą ir pateikti atitinkamus elementus JSX.

For pavyzdys:

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

- for Kiekvieno naudojimas: taip pat galite naudoti for kiekvieno metodą, norėdami kartoti masyvą ir pateikti atitinkamus elementus JSX.

For pavyzdys:

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

 

Sąlygos ir kilpos React leidžia kurti lanksčias ir dinamiškas vartotojo sąsajas. Naudodami sąlyginius sakinius ir ciklo struktūras JSX, galite rodyti skirtingus elementus ir generuoti sąrašus pagal duomenis jūsų React programoje.