close

التقديم والحلقات الشرطية بتنسيق React

يتم تنفيذ شروط التقديم والحلقات React باستخدام العبارات الشرطية وهياكل الحلقة في JSX.

 

1. تقديم الشروط

- الاستخدام: يمكنك استخدام البنية في JSX لفحص شرط وتقديم عناصر مختلفة بناءً على هذا الشرط. if-else if-else

For مثال:

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

- استخدام المعامل الثلاثي: يمكنك أيضًا استخدام المعامل الثلاثي لتقصير البنية في JSX. if-else

For مثال:

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

- استخدام عامل التشغيل المنطقي &&: عندما تريد فقط عرض عنصر إذا كان الشرط صحيحًا ، يمكنك استخدام عامل التشغيل المنطقي &&.

For مثال:

{isLoggedIn && <WelcomeUser />}

 

2. تقديم الحلقات

- الاستخدام: يمكنك استخدام هذه الطريقة لتكرار المصفوفة وتقديم العناصر المقابلة لها في JSX. map map

For مثال 

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

- استخدام for حلقة: يمكنك أيضًا استخدام for حلقة للتكرار عبر مصفوفة وتقديم العناصر المقابلة في JSX.

For مثال:

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 كل: يمكنك أيضًا استخدام for التابع each لتكرار المصفوفة وتقديم العناصر المقابلة في JSX.

For مثال:

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

 

تسمح لك الشروط والحلقات React بإنشاء واجهات مستخدم مرنة وديناميكية. باستخدام العبارات الشرطية وهياكل الحلقة في JSX ، يمكنك عرض عناصر مختلفة وإنشاء قوائم بناءً على البيانات الموجودة في تطبيقك React.