React Conditional Rendering Simplified

عندما يكون لديك حالات متعددة تحتاج إلى التحقق منها في تطبيق React، قد تجد أن استخدام التعبير الشرطي العادي (if-else) داخل الـ JSX يصبح مقلقًا وغير فعال، وبالتالي تبحث عن طريقة أكثر تعبيرًا وسهولة للتعامل مع الحالات المتعددة. يمكن أن تكون البديل الأكثر شيوعًا هو استخدام شرط مفرد (ternary operator)، ولكن في بعض الحالات، قد تكون بنية if-else if-else أكثر توضيحًا وتنظيمًا.

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

فلنجرب ذلك:

jsxCopy code
render() {
    const conditions = [
        { condition: this.props.conditionA, result: <span>Condition Aspan> },
        { condition: this.props.conditionB, result: <span>Condition Bspan> },
    ];

    const match = conditions.find(item => item.condition);

    return (
        <div>
            {match ? match.result : <span>Neitherspan>}
        div>
    );
}

في هذا الكود، نقوم أولاً بإنشاء مصفوفة من الكائنات، حيث يحتوي كل كائن على شرط ونتيجة مقابلة. ثم نبحث في هذه المصفوفة عن الشرط الذي يتطابق مع الحالة المطلوبة. إذا وجدنا تطابقًا، نرجع النتيجة المقابلة، وإلا فإننا نرجع “Neither”.

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

بالطبع، سأوفر لك بعض المزيد من المعلومات حول كيفية كتابة هذه الهيكلية الشرطية بشكل أكثر تعبيرًا وفعالية في React.

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

لنقم بتجربة هذه الطريقة:

jsxCopy code
renderContent() {
    if (this.props.conditionA) {
        return <span>Condition Aspan>;
    } else if (this.props.conditionB) {
        return <span>Condition Bspan>;
    } else {
        return <span>Neitherspan>;
    }
}

render() {
    return (
        <div>
            {this.renderContent()}
        div>
    );
}

في هذا المثال، قمنا بفصل الهيكلية الشرطية إلى دالة منفصلة تسمى renderContent، والتي تقوم بتحديد العنصر المناسب للعرض بناءً على الشروط المعطاة. ثم نستدعي هذه الدالة داخل دالة render لعرض المحتوى في الـ JSX.

هذا الأسلوب يزيل الازدواجية في الكود ويسمح بإعادة استخدام الهيكلية الشرطية في أكثر من مكان إذا لزم الأمر.

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

باستخدام أي من هذه الأساليب، يمكنك جعل هيكلية الشرطية في تطبيقك React أكثر تعبيرًا وفعالية، مما يجعل الكود أكثر قابلية للصيانة وتطويره في المستقبل.