الرندرة الشرطية (Conditional Rendering): إظهار وإخفاء عناصر الـ HTML برمجياً

مرحباً أيها المطورون! في هذا الدرس الاحترافي، سنتعلم كيفية التحكم في ظهور وإخفاء عناصر واجهة المستخدم (UI) ديناميكياً باستخدام مفهوم الرندرة الشرطية في React.js. سنقوم ببناء مثال عملي لتوضيح هذا المفهوم الأساسي.

الخطوة 1: الأساسيات - إظهار وإخفاء بسيط باستخدام شرط منطقي

لنبدأ بأبسط طريقة للتحكم في ظهور عنصر: استخدام متغير منطقي (boolean) لتحديد ما إذا كان العنصر يجب أن يظهر أم لا. في React، يمكننا استخدام التعبيرات الشرطية (conditional expressions) داخل JSX.

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

هذا هو الجزء الأول من الكود الذي سنستخدمه:

import React, { useState } from 'react';

function ConditionalRenderer() {
  // تعريف حالة (state) لتتبع ما إذا كان النص مرئياً أم لا
  const [isVisible, setIsVisible] = useState(true);

  // دالة لتبديل قيمة isVisible عند النقر على الزر
  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      {/* زر للتحكم في ظهور النص */}
      <button onClick={toggleVisibility}>
        {isVisible ? 'إخفاء النص' : 'إظهار النص'}
      </button>

      {/* الرندرة الشرطية: إذا كان isVisible صحيحاً، اعرض الفقرة */}
      {isVisible && <p>هذا النص يظهر ويختفي بناءً على الشرط!</p>}
    </div>
  );
}

export default ConditionalRenderer;

في هذا الجزء:

• استخدمنا الخطاف useState لإنشاء متغير حالة isVisible بقيمة ابتدائية true.
• أنشأنا دالة toggleVisibility لتبديل قيمة isVisible.
• داخل JSX، استخدمنا التعبير {isVisible && <p>...</p>}. هذا هو اختصار لـ "إذا كان isVisible صحيحاً، قم بعرض العنصر <p>."

الخطوة 2: استخدام التعبير الشرطي الثلاثي (Ternary Operator) لعرض بدائل

في بعض الأحيان، قد لا نرغب فقط في إظهار أو إخفاء عنصر، بل نرغب في عرض عنصر أو عنصر آخر بناءً على شرط معين. هنا يأتي دور التعبير الشرطي الثلاثي (condition ? expr1 : expr2).

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

لنعدل المكون السابق ليعرض رسالة مختلفة عندما يكون النص مخفياً:

import React, { useState } from 'react';

function ConditionalRenderer() {
  const [isVisible, setIsVisible] = useState(true);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>
        {isVisible ? 'إخفاء النص' : 'إظهار النص'}
      </button>

      {/* الرندرة الشرطية باستخدام التعبير الثلاثي */}
      {isVisible ? (
        // إذا كان isVisible صحيحاً، اعرض هذا النص
        <p>مرحباً بك! هذا النص مرئي حالياً.</p>
      ) : (
        // إذا كان isVisible خاطئاً، اعرض هذا النص بدلاً منه
        <p>النص مخفي حالياً. انقر على الزر لإظهاره.</p>
      )}

      {/* يمكن دمج الرندرة الشرطية مع عناصر أخرى */}
      <p>هذا العنصر يظهر دائماً.</p>
    </div>
  );
}

export default ConditionalRenderer;

في هذا التعديل:

• استخدمنا {isVisible ? (<p>...</p>) : (<p>...</p>)} لعرض فقرتين مختلفتين بناءً على قيمة isVisible.
• هذا النمط مفيد جداً لعرض حالات مختلفة، مثل "تحميل البيانات..." أو "لا توجد بيانات."

الخطوة 3: التعامل مع حالات التحميل (Loading States)

تطبيق شائع جداً للرندرة الشرطية هو إظهار مؤشر تحميل (loading indicator) بينما يتم جلب البيانات من خادم أو يتم تنفيذ عملية تستغرق وقتاً. لنضف حالة تحميل إلى مثالنا.

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

هذا هو الجزء الثالث من الكود، مع إضافة مؤشر تحميل:

import React, { useState, useEffect } from 'react';

function ConditionalRenderer() {
  const [isLoading, setIsLoading] = useState(true); // حالة لتتبع ما إذا كان التطبيق يحمل بيانات
  const [data, setData] = useState(null);           // حالة لتخزين البيانات المحملة

  // محاكاة لعملية جلب بيانات تستغرق وقتاً
  useEffect(() => {
    // بعد 3 ثوانٍ، سنقوم بتغيير حالة التحميل وتعيين بعض البيانات
    const timer = setTimeout(() => {
      setIsLoading(false); // تم الانتهاء من التحميل
      setData('تم تحميل هذه البيانات بنجاح من الخادم!'); // تعيين البيانات
    }, 3000); // 3000 مللي ثانية = 3 ثوانٍ

    // دالة التنظيف (cleanup function) لتجنب تسرب الذاكرة
    return () => clearTimeout(timer);
  }, []); // [] يعني أن useEffect سيتم تشغيله مرة واحدة فقط عند تحميل المكون

  return (
    <div>
      <h3>مثال على حالة التحميل:</h3>
      {isLoading ? (
        // إذا كان isLoading صحيحاً، اعرض مؤشر التحميل
        <p>جاري تحميل البيانات... الرجاء الانتظار.</p>
      ) : (
        // إذا كان isLoading خاطئاً، اعرض البيانات المحملة
        <div>
          <p>{data}</p>
          <p>التحميل اكتمل!</p>
        </div>
      )}
    </div>
  );
}

export default ConditionalRenderer;

في هذا الجزء:

• أضفنا isLoading و data كحالات.
• استخدمنا useEffect لمحاكاة جلب البيانات، حيث نقوم بتعيين isLoading إلى false بعد 3 ثوانٍ.
• الرندرة الشرطية الآن تعرض إما "جاري تحميل البيانات..." أو البيانات الفعلية بمجرد تحميلها.

الكود النهائي الكامل

إليك الكود الكامل للمكون ConditionalRenderer الذي يجمع بين جميع المفاهيم التي تعلمناها في هذا الدرس. يمكنك نسخ هذا الكود ولصقه في مشروع React الخاص بك لتجربته.

import React, { useState, useEffect } from 'react';

function ConditionalRenderer() {
  // الحالة الأولى: إظهار وإخفاء نص باستخدام زر
  const [isVisible, setIsVisible] = useState(true);

  // الحالة الثانية: محاكاة التحميل وعرض البيانات
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

  // دالة لتبديل رؤية النص الأول
  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  // تأثير جانبي لمحاكاة جلب البيانات عند تحميل المكون
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
      setData('تم تحميل هذه البيانات بنجاح من الخادم بعد انتظار!');
    }, 3000);

    return () => clearTimeout(timer); // تنظيف المؤقت
  }, []);

  return (
    <div>
      <h2>الرندرة الشرطية: مثال تفاعلي</h2>

      {/* الجزء الأول: تبديل الرؤية باستخدام && و التعبير الثلاثي */}
      <h3>1. إظهار/إخفاء عنصر وتبديل المحتوى</h3>
      <button onClick={toggleVisibility}>
        {isVisible ? 'إخفاء النص الأول' : 'إظهار النص الأول'}
      </button>

      {isVisible ? (
        <p style={{ color: 'green' }}><b>هذا هو النص المرئي حالياً.</b></p>
      ) : (
        <p style={{ color: 'red' }}><i>النص الأول مخفي حالياً.</i></p>
      )}

      <hr />

      {/* الجزء الثاني: التعامل مع حالة التحميل */}
      <h3>2. عرض مؤشر التحميل ثم البيانات</h3>
      {isLoading ? (
        <p style={{ fontStyle: 'italic', color: 'blue' }}>جاري تحميل البيانات... <span role="img" aria-label="loading spinner">⏳</span></p>
      ) : (
        <div>
          <p style={{ fontWeight: 'bold' }}>{data}</p>
          <p>عملية التحميل اكتملت بنجاح! <span role="img" aria-label="check mark">✅</span></p>
        </div>
      )}
    </div>
  );
}

export default ConditionalRenderer;

لجعل هذا المكون يعمل في تطبيق React الخاص بك، يمكنك استدعائه ضمن ملف App.js أو أي مكون أب آخر:

// App.js
import React from 'react';
import ConditionalRenderer from './ConditionalRenderer'; // تأكد من المسار الصحيح

function App() {
  return (
    <div className="App">
      <ConditionalRenderer />
    </div>
  );
}

export default App;

النتيجة المتوقعة

عند تشغيل هذا المكون في تطبيق React الخاص بك، ستلاحظ ما يلي:

1. في البداية، سيظهر زر بعنوان "إخفاء النص الأول" وفقرة خضراء تقول "هذا هو النص المرئي حالياً.".
2. أسفل ذلك، ستظهر رسالة "جاري تحميل البيانات... ⏳" باللون الأزرق المائل.
3. عند النقر على الزر "إخفاء النص الأول"، ستتغير الفقرة إلى اللون الأحمر المائل وتقول "النص الأول مخفي حالياً."، وسيتغير نص الزر إلى "إظهار النص الأول". بالنقر عليه مرة أخرى، سيعود النص الأصلي.
4. بعد حوالي 3 ثوانٍ، ستختفي رسالة "جاري تحميل البيانات..."، ويحل محلها فقرتان: الأولى بالخط العريض تحتوي على "تم تحميل هذه البيانات بنجاح من الخادم بعد انتظار!"، والثانية "عملية التحميل اكتملت بنجاح! ✅".

هذا يوضح كيف يمكنك التحكم ديناميكياً في محتوى واجهة المستخدم لتقديم تجربة مستخدم سلسة وتفاعلية.

← السابقالفهرس