التقديم الشرطي (Conditional Rendering) في React

- سبتمبر 30, 2024

التقديم الشرطي (Conditional Rendering) في React هو عملية عرض مكونات أو عناصر واجهة المستخدم بناءً على شروط معينة. هذا يسمح بإنشاء واجهات مستخدم ديناميكية تتكيف مع التغيرات في البيانات وتفاعلات المستخدم.

طرق التقديم الشرطي في React

استخدام جملة if...else: يمكنك استخدام جملة if...else لتحديد ما يجب عرضه بناءً على شرط معين. على سبيل المثال:

function Greeting(props) {
if (props.isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign up.</h1>;
}
}

المشغل الثلاثي (Ternary Operator): المشغل الثلاثي هو طريقة مختصرة لكتابة جمل الشرط. على سبيل المثال:

function Greeting(props) {
return (
<div>
{props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
</div>
);
}

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

function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 && (
<h2>You have {unreadMessages.length} unread messages.</h2>
)}
</div>
);
}

أهمية التقديم الشرطي في React

تحسين تجربة المستخدم: يسمح التقديم الشرطي بإنشاء واجهات مستخدم تتفاعل بشكل ديناميكي مع المستخدم، مما يحسن من تجربة المستخدم.
تنظيم الكود: يساعد في تنظيم الكود وجعله أكثر قابلية للقراءة والصيانة.
التكيف مع البيانات: يمكن للتقديم الشرطي أن يتكيف مع التغيرات في البيانات بشكل سلس، مما يجعل التطبيقات أكثر مرونة.

بحث هذه المدونة الإلكترونية

مدونة أحمد زعـــــــــكان