Sharuddan Rendering da madaukai a ciki React

React Ana yin sharuɗɗan nuni da madaukai a ciki ta amfani da maganganun sharadi da tsarin madauki a cikin JSX.

 

1. Halin nunawa

- Yin amfani da: Kuna iya amfani da tsarin a JSX don bincika yanayi da kuma sanya abubuwa daban-daban dangane da wannan yanayin. if-else if-else

For misali:

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

- Amfani da ternary afareta: Hakanan zaka iya amfani da afaretan ternary don rage tsarin a JSX. if-else

For misali:

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

- Yin amfani da ma'ana && afareto: Lokacin da kawai kuke son nuna wani kashi idan yanayi ya kasance gaskiya, zaku iya amfani da ma'ana && afareto.

For misali:

{isLoggedIn && <WelcomeUser />}

 

2. madaukai masu nunawa

- Yin amfani da: Kuna iya amfani da hanyar don maimaita kan tsararru da yin abubuwa masu dacewa a cikin JSX. map map

For misali

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

- Amfani da for madauki: Hakanan zaka iya amfani da for madauki don jujjuyawa akan tsararru da sanya abubuwa masu dacewa a cikin JSX.

For misali:

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

- Amfani da for Kowa: Hakanan zaka iya amfani da for kowace hanya don maimaita kan tsararru da yin abubuwa masu dacewa a cikin JSX.

For misali:

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

 

Yanayi da madaukai a ciki React suna ba ku damar ƙirƙirar UI masu sassauƙa da ƙarfi. Ta yin amfani da bayanan sharadi da tsarin madauki a cikin JSX, zaku iya nuna abubuwa daban-daban da ƙirƙirar jeri bisa bayanai a cikin React aikace-aikacenku.