Rindreáil Coinníollach agus Lúb i React

React Déantar coinníollacha rindreála agus lúba isteach ag baint úsáide as ráitis choinníollacha agus struchtúir lúb i JSX.

1. Coinníollacha rindreála

- Ag baint úsáide as: Is féidir leat an struchtúr i JSX a úsáid chun riocht a sheiceáil agus gnéithe éagsúla a sholáthar bunaithe ar an gcoinníoll sin. if-else if-else

For sampla:

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

- An t-oibreoir trínártha a úsáid: Is féidir leat an t-oibreoir trínártha a úsáid freisin chun an struchtúr i JSX a ghiorrú. if-else

For sampla:

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

- Ag baint úsáide as an oibreoir loighciúil &&: Nuair nach mian leat ach eilimint a thaispeáint má tá coinníoll fíor, is féidir leat an t-oibreoir loighciúil && a úsáid.

For sampla:

{isLoggedIn && <WelcomeUser />}

2. Lúba rindreála

- Ag baint úsáide as: Is féidir leat an modh a úsáid chun athrá a dhéanamh thar eagar agus chun eilimintí comhfhreagracha a sholáthar in JSX. map map

For sampla

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

- for Lúb a úsáid: Is féidir leat for lúb a úsáid freisin chun athrá a dhéanamh thar eagar agus chun eilimintí comhfhreagracha a sholáthar in JSX.

For sampla:

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

- Ag baint úsáide as for Gach: Is féidir leat an for Gach modh a úsáid freisin chun atriall thar eagar agus gnéithe comhfhreagracha a sholáthar i JSX.

For sampla:

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

Ligeann coinníollacha agus lúba isteach React duit UI solúbtha agus dinimiciúil a chruthú. Trí úsáid a bhaint as ráitis choinníollacha agus struchtúir lúba in JSX, is féidir leat gnéithe éagsúla a thaispeáint agus liostaí a ghiniúint bunaithe ar shonraí i d’ React iarratas.