Paparan Bersyarat dan Gelung masuk React

Keadaan pemaparan dan gelung masuk React dilakukan menggunakan pernyataan bersyarat dan struktur gelung dalam JSX.

 

1. Syarat rendering

- Menggunakan: Anda boleh menggunakan struktur dalam JSX untuk menyemak keadaan dan menghasilkan elemen berbeza berdasarkan syarat tersebut. if-else if-else

For contoh:

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

- Menggunakan operator ternary: Anda juga boleh menggunakan operator ternary untuk memendekkan struktur dalam JSX. if-else

For contoh:

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

- Menggunakan operator && logik: Apabila anda hanya mahu memaparkan elemen jika syarat adalah benar, anda boleh menggunakan operator && logik.

For contoh:

{isLoggedIn && <WelcomeUser />}

 

2. Rendering gelung

- Menggunakan: Anda boleh menggunakan kaedah untuk mengulangi tatasusunan dan menghasilkan elemen yang sepadan dalam JSX. map map

For contoh

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

- Menggunakan for gelung: Anda juga boleh menggunakan for gelung untuk lelaran pada tatasusunan dan menghasilkan elemen yang sepadan dalam JSX.

For contoh:

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

- Menggunakan for Setiap: Anda juga boleh menggunakan for kaedah Setiap untuk mengulangi tatasusunan dan menghasilkan elemen yang sepadan dalam JSX.

For contoh:

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

 

Syarat dan gelung masuk React membolehkan anda membuat UI yang fleksibel dan dinamik. Dengan menggunakan pernyataan bersyarat dan struktur gelung dalam JSX, anda boleh memaparkan elemen yang berbeza dan menjana senarai berdasarkan data dalam React aplikasi anda.