العرض الشرطي في React: if والمعامل الثلاثي و&& وnull

العرض الشرطي في React يعني اختيار ما يُرجعه المكوّن بـ JavaScript عادية: عبارة if قبل return، أو معامل ثلاثي cond ? a : b داخل JSX، أو cond && <Thing /> لإظهار شيء أو لا شيء. لا توجد صيغة قوالب خاصة عليك تعلمها.

import { useState } from 'react';

export default function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return (
        <div>
            <p>{isLoggedIn ? 'Welcome back, Ada.' : 'Please log in.'}</p>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Log out' : 'Log in'}
            </button>
        </div>
    );
}

انقر الزر فتتبدل الرسالة والتسمية كلتاهما، لأن كل معامل ثلاثي يختار نصًا مختلفًا في العرض التالي. غيّر useState(false) إلى useState(true) فتبدأ المعاينة بحالة تسجيل الدخول.

عبارات if والإرجاع المبكر

تقبل أقواس JSX المعقوصة التعابير لا العبارات، فلا يمكنك كتابة {if (x) ...} داخل الترميز. لكن يمكنك كتابة أي if تريدها قبل return. عندما تبدو حالة كاملة للمكوّن مختلفة (التحميل، أو الخطأ، أو الفراغ)، أرجع مبكرًا لكل حالة واحتفظ بالترميز الرئيسي للحالة العادية.

import { useState } from 'react';

function Inbox({ status, messages }) {
    if (status === 'loading') {
        return <p>Loading messages...</p>;
    }
    if (status === 'error') {
        return <p style={{ color: 'crimson' }}>Could not load your inbox.</p>;
    }
    if (messages.length === 0) {
        return <p>No messages yet.</p>;
    }
    return (
        <ul>
            {messages.map((m) => (
                <li key={m}>{m}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [status, setStatus] = useState('loading');
    const [messages, setMessages] = useState([]);

    return (
        <div>
            <button onClick={() => setStatus('loading')}>Loading</button>{' '}
            <button onClick={() => setStatus('error')}>Error</button>{' '}
            <button onClick={() => { setStatus('done'); setMessages([]); }}>Empty</button>{' '}
            <button onClick={() => { setStatus('done'); setMessages(['Hi', 'Lunch?']); }}>
                Loaded
            </button>
            <Inbox status={status} messages={messages} />
        </div>
    );
}

كل زر يضع صندوق الوارد في حالة مختلفة، ولكل حالة فرعها القصير السهل القراءة. يُبقي الإرجاع المبكر المسار الطبيعي في الأسفل دون تداخل.

المعامل الثلاثي داخل JSX

عندما يتغير جزء صغير فقط من الترميز، يُبقيه معامل ثلاثي مضمّن متماسكًا: {isOpen ? <CloseIcon /> : <MenuIcon />}. يعمل المعامل الثلاثي جيدًا مع خيارين. أما المعاملات الثلاثية المتداخلة لثلاثة خيارات أو أكثر فتصبح صعبة القراءة بسرعة:

// Hard to follow
{status === 'loading' ? <Spinner /> : status === 'error' ? <ErrorBox /> : <List />}

عندما ترى ذلك، انقل المنطق إلى سلسلة if قبل return (كما في الأعلى) أو إلى خريطة كائن (في الأسفل).

المعامل && والصفر الشارد

يعرض cond && <Thing /> العنصر <Thing /> عندما تكون cond صائبة، ولا يعرض شيئًا عندما تكون false. ينجح ذلك لأن && يُرجع طرفه الأول عندما يكون خاطئًا، ولا تعرض React شيئًا للقيم false وnull وundefined.

الفخ أن 0 قيمة خاطئة أيضًا، وأن React تعرض الأرقام فعلًا. لذا فإن count && <Badge /> مع عدد يساوي 0 يضع 0 حرفيًا في الصفحة.

import { useState } from 'react';

export default function App() {
    const [unread, setUnread] = useState(0);

    return (
        <div>
            <p>
                Broken: {unread && <b>{unread} unread</b>}
            </p>
            <p>
                Fixed: {unread > 0 && <b>{unread} unread</b>}
            </p>
            <button onClick={() => setUnread(unread + 1)}>New message</button>{' '}
            <button onClick={() => setUnread(0)}>Mark all read</button>
        </div>
    );
}

عندما لا توجد رسائل غير مقروءة يقرأ السطر الأول "Broken: 0" بينما لا يعرض الثاني شيئًا بعد "Fixed:". انقر New message فيتفقان؛ وانقر Mark all read فيعود 0. الحل هو إعطاء && قيمة منطقية حقيقية: unread > 0 أو items.length > 0 أو Boolean(unread). للنص الفارغ '' المشكلة نفسها من حيث المبدأ، لكنه يُعرض كلا شيء مرئي، فنادرًا ما تلاحظه.

إرجاع null

يمكن للمكوّن أن يُرجع null ليعرض لا شيء. شريط تحذير لا يظهر إلا عندما يوجد ما يُحذَّر منه مثال مناسب: يعرض الأب دائمًا <Warning /> والمكوّن هو من يقرر.

import { useState } from 'react';

function Warning({ message }) {
    console.log('Warning rendered, message =', message);
    if (!message) {
        return null;
    }
    return (
        <p style={{ background: '#fff4d6', padding: 8, borderRadius: 6 }}>{message}</p>
    );
}

export default function App() {
    const [message, setMessage] = useState('');

    return (
        <div>
            <Warning message={message} />
            <button onClick={() => setMessage('Your trial ends tomorrow.')}>Warn</button>{' '}
            <button onClick={() => setMessage('')}>Dismiss</button>
        </div>
    );
}

راقب وحدة التحكم: تسجّل الدالة Warning في كل عرض، بما في ذلك المرات التي تُرجع فيها null. إرجاع null يتخطى المخرجات لا العمل. ما زالت خطافاته وتأثيراته تعمل، فإذا كان المكوّن مكلفًا أو يبدأ شيئًا ما (مؤقتًا أو اشتراكًا)، فقرّر في الأب ولا تعرضه أصلًا.

تخزين JSX في متغير

JSX قيمة، فيمكنك إسنادها إلى متغير، وبناؤها بعبارات if، ووضعها في الترميز لاحقًا. يفيد هذا عندما يعتمد جزء من تخطيط أكبر على عدة شروط.

function Checkout({ cart, user }) {
    let action;
    if (!user) {
        action = <a href="/login">Log in to check out</a>;
    } else if (cart.length === 0) {
        action = <p>Your cart is empty.</p>;
    } else {
        action = <button>Pay now</button>;
    }

    return (
        <section>
            <h2>Your cart</h2>
            {action}
        </section>
    );
}

الاختيار بين عدة مكوّنات بكائن

عندما يكون الاختيار «واحدًا من كثير»، يكون الكائن الذي يربط كل قيمة بمكوّن أقصر من سلسلة if طويلة أو من switch، وإضافة حالة سطر واحد.

import { useState } from 'react';

function Profile() {
    return <p>Name: Ada Lovelace</p>;
}
function Billing() {
    return <p>Plan: Pro, renews on 1 May</p>;
}
function Security() {
    return <p>Two-factor login is on.</p>;
}

const TABS = { profile: Profile, billing: Billing, security: Security };

export default function App() {
    const [tab, setTab] = useState('profile');
    const Panel = TABS[tab];

    return (
        <div>
            {Object.keys(TABS).map((name) => (
                <button
                    key={name}
                    onClick={() => setTab(name)}
                    style={{ fontWeight: tab === name ? 700 : 400, marginInlineEnd: 6 }}
                >
                    {name}
                </button>
            ))}
            <Panel />
        </div>
    );
}

يختار TABS[tab] مكوّنًا، ويعرضه <Panel />. يجب أن يبدأ المتغير بحرف كبير: تعامل JSX <panel /> كوسم HTML. أضف مدخلًا notifications إلى TABS بمكوّنه الخاص فيظهر زر رابع.

الإخفاء ليس كعدم العرض

هناك طريقتان لإخفاء شيء، وتتصرفان بشكل مختلف. يزيل show && <Counter /> المكوّن من الشجرة عندما تكون show خاطئة. تفصله React وترمي حالته، فيبدأ من الصفر عندما يعود. أما إخفاؤه بـ CSS (style={{ display: show ? 'block' : 'none' }}) فيُبقيه مركّبًا، فتبقى حالته.

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);
    return (
        <p>
            {label}: <button onClick={() => setCount(count + 1)}>{count}</button>
        </p>
    );
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            <label>
                <input type="checkbox" checked={show} onChange={(e) => setShow(e.target.checked)} />
                Show counters
            </label>
            {show && <Counter label="Removed with &&" />}
            <div style={{ display: show ? 'block' : 'none' }}>
                <Counter label="Hidden with CSS" />
            </div>
        </div>
    );
}

انقر العدّادين بضع مرات، وألغِ تحديد المربع، ثم حدّده مرة أخرى. عاد العدّاد الأول إلى 0 وما زال الثاني يحتفظ برقمه. لا أحدهما خاطئ: الإزالة مناسبة لنموذج ينبغي أن يبدأ فارغًا في كل مرة، والإخفاء مناسب لتبويبات ينبغي الاحتفاظ بموضع التمرير أو المدخلات فيها. تشرح صفحة العرض كيف تقرر React أن المكوّن هو نفسه بين مرات العرض.

تضيف React 19.2 خيارًا ثالثًا، <Activity mode="hidden">، الذي يخفي أبناءه ويحتفظ بحالتهم كما تفعل CSS، وينظّف أيضًا تأثيراتهم إلى أن يُعرضوا من جديد.

props وسمات شرطية

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

<button disabled={!canSave} className={hasError ? 'field error' : 'field'}>
    Save
</button>
<input aria-invalid={hasError} placeholder={user ? user.email : 'you@example.com'} />

عندما تكون قيمة prop هي undefined، تحذف React السمة كليًا، وهذه طريقة نظيفة لإضافة سمة في بعض الأحيان فقط: title={isTruncated ? fullText : undefined}. وللسمات المنطقية مثل disabled وchecked، مرّر true أو false فتضيفها React أو تزيلها.

الشروط في القوائم

لاستبعاد عناصر من قائمة، رشّح المصفوفة قبل المرور عليها بدلًا من إرجاع null من داخل map. يُقرأ items.filter((i) => i.done).map(...) كما يعمل تمامًا، وتعرضه صفحة القوائم والمفاتيح في مثال قابل للتشغيل.