يسمح لك العرض الشرطي في React بتصيير مكونات أو عناصر مختلفة بناءً على شروط معينة، مثل الحالة أو الخاصيات. فيما يلي بعض الطرق الشائعة لتحقيق العرض الشرطي:

1. استخدام عبارات If-Else

يمكنك استخدام عبارات JavaScript القياسية if-else داخل المكون الخاص بك.

function MyComponent({ isLoggedIn }) {
    if (isLoggedIn) {
        return 
Welcome back!
;
    } else {
        return 
Please sign in.
;
    }
}

2. استخدام عوامل التشغيل الثلاثية

هذه طريقة مختصرة لعرض المحتوى بناءً على شرط.

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        
    );
}

3. استخدام عامل التشغيل المنطقي &&

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

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn && 
Welcome back!
}
            {!isLoggedIn && 
Please sign in.
}
        
    );
}

4. بيان التبديل

للحالات الأكثر تعقيدًا، يمكنك استخدام عبارة التبديل.

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return 
Loading...
;
        case 'success':
            return 
Data loaded successfully!
;
        case 'error':
            return 
There was an error!
;
        default:
            return null;
    }
}

مثال

إليك مثال كامل باستخدام المكونات الوظيفية:

import React from 'react';

function App() {
    const [isLoggedIn, setIsLoggedIn] = React.useState(false);

    return (
        

             setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            
            {isLoggedIn ? 
Welcome back!
 : 
Please sign in.
}
        
    );
}

export default App;

ملخص

اختر الطريقة التي تناسب احتياجاتك بناءً على مدى تعقيد ظروفك وأسلوب الترميز الشخصي الخاص بك. اسمحوا لي أن أعرف إذا كنت بحاجة إلى المزيد من الأمثلة أو التوضيحات!