العرض الشرطي

function Greeting({ isLoggedIn }) { if (isLoggedIn) { return <h1>مرحباً بعودتك!</h1>; } else { return <h1>يرجى تسجيل الدخول.</h1>; } } // الاستخدام function App() { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( <div> <Greeting isLoggedIn={isLoggedIn} /> <button onClick={() => setIsLoggedIn(!isLoggedIn)}> {isLoggedIn ? 'تسجيل الخروج' : 'تسجيل الدخول'} </button> </div> ); }

function UserStatus({ isActive }) { return ( <div> <h2>حالة المستخدم</h2> <p> أنت حالياً{" "} {isActive ? ( <span style={{ color: 'green' }}>متصل</span> ) : ( <span style={{ color: 'red' }}>غير متصل</span> )} </p> <div className={isActive ? 'status-active' : 'status-inactive'}> {isActive ? 'متصل' : 'غير متصل'} </div> </div> ); }

function Notifications({ messages }) { return ( <div> <h2>صندوق الوارد</h2> {messages.length > 0 && ( <div className="notification-badge"> لديك {messages.length} رسائل غير مقروءة </div> )} {messages.length === 0 && ( <p>لا توجد رسائل جديدة</p> )} </div> ); } // الاستخدام function App() { const [messages, setMessages] = useState(['مرحباً', 'أهلاً']); return ( <div> <Notifications messages={messages} /> <button onClick={() => setMessages([])}> مسح الرسائل </button> </div> ); }

function LoginControl() { const [isLoggedIn, setIsLoggedIn] = useState(false); let button; if (isLoggedIn) { button = <button onClick={() => setIsLoggedIn(false)}>تسجيل الخروج</button>; } else { button = <button onClick={() => setIsLoggedIn(true)}>تسجيل الدخول</button>; } let message; if (isLoggedIn) { message = <p>لديك حق الوصول إلى الميزات المميزة.</p>; } else { message = <p>يرجى تسجيل الدخول للوصول إلى الميزات المميزة.</p>; } return ( <div> <h1>حالة الحساب</h1> {message} {button} </div> ); }

function StatusMessage({ status }) { // الطريقة 1: عبارة Switch const getMessageWithSwitch = () => { switch(status) { case 'loading': return <div className="spinner">جاري التحميل...</div>; case 'success': return <div className="success">تم تحميل البيانات بنجاح!</div>; case 'error': return <div className="error">فشل تحميل البيانات.</div>; default: return <div>لا توجد حالة</div>; } }; // الطريقة 2: تعيين الكائن (أنظف) const statusComponents = { loading: <div className="spinner">جاري التحميل...</div>, success: <div className="success">تم تحميل البيانات بنجاح!</div>, error: <div className="error">فشل تحميل البيانات.</div>, idle: <div>لا توجد حالة</div> }; return ( <div> {/* استخدام switch */} {getMessageWithSwitch()} {/* أو استخدام تعيين الكائن */} {statusComponents[status] || statusComponents.idle} </div> ); }

function WarningBanner({ warning, onClose }) { if (!warning) { return null; // لا تعرض أي شيء } return ( <div className="warning-banner"> <span>{warning}</span> <button onClick={onClose}>×</button> </div> ); } // الاستخدام function App() { const [warning, setWarning] = useState('ستنتهي جلستك خلال 5 دقائق'); return ( <div> <WarningBanner warning={warning} onClose={() => setWarning(null)} /> <h1>لوحة التحكم</h1> </div> ); }

function Button({ isPrimary, isDisabled, children }) { // الطريقة 1: قوالب حرفية const className1 = `btn ${isPrimary ? 'btn-primary' : 'btn-secondary'} ${isDisabled ? 'btn-disabled' : ''}`; // الطريقة 2: ربط المصفوفة const className2 = [ 'btn', isPrimary ? 'btn-primary' : 'btn-secondary', isDisabled && 'btn-disabled' ].filter(Boolean).join(' '); // الطريقة 3: على أساس الكائن (تتطلب مكتبة classnames) // const className3 = classnames({ // 'btn': true, // 'btn-primary': isPrimary, // 'btn-secondary': !isPrimary, // 'btn-disabled': isDisabled // }); return ( <button className={className1} disabled={isDisabled}> {children} </button> ); } // الاستخدام function App() { return ( <div> <Button isPrimary={true} isDisabled={false}> حفظ </Button> <Button isPrimary={false} isDisabled={false}> إلغاء </Button> <Button isPrimary={true} isDisabled={true}> جاري التحميل... </Button> </div> ); }

function UserDashboard({ user, isLoading, error }) { // عوائد مبكرة للحالات الخاصة if (isLoading) { return <div className="loading">جاري تحميل بيانات المستخدم...</div>; } if (error) { return ( <div className="error-container"> <h2>خطأ</h2> <p>{error.message}</p> <button onClick={() => window.location.reload()}> إعادة المحاولة </button> </div> ); } if (!user) { return <div>لم يتم العثور على المستخدم</div>; } // العرض الرئيسي مع شروط متداخلة return ( <div className="dashboard"> <h1>مرحباً، {user.name}!</h1> {/* شارة شرطية */} {user.isPremium && ( <span className="premium-badge">عضو مميز</span> )} {/* محتوى شرطي بناءً على نوع الحساب */} {user.accountType === 'admin' ? ( <AdminPanel /> ) : user.accountType === 'moderator' ? ( <ModeratorPanel /> ) : ( <UserPanel /> )} {/* إشعار شرطي */} {user.notifications.length > 0 && ( <div className="notifications"> <h3>لديك {user.notifications.length} إشعارات</h3> {user.notifications.map(notif => ( <div key={notif.id}>{notif.message}</div> ))} </div> )} {/* تحذير شرطي */} {!user.emailVerified && ( <div className="warning"> يرجى التحقق من عنوان بريدك الإلكتروني </div> )} </div> ); }