إضافة prop وفقًا لشرط في React؟

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

يمكنك استخدام هذه الطريقة في حال كان لديك prop قادم من مكون أخر غير المكونالذي تعمل عليه أو قادم من قاعدة البيانات.

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

const function InputComponent({name}) {

  if(name == null){
    return (
      	// في حال كان هنالك اسم سوف يستطيع ادخال الاسم
        <input type="text" />
    );
}
} else {
    return (
      	// في حال كان الأسم موجود سوف يكون قيمة المدخل الاسم القادم
        <input type="text" value={name} disabled />
    );

}

بهذه الطريقة حسب الـ prop القادم إلى المكون سوف تصبح بنية المكون الجديد.

أتمنى لك التوفيق.

في حالتك يمكن حل المشكلة كاﻵتي:

const InputComponent = function() {
    const name = "My Name";

    return (
      	
        <input type="text" disabled={name !== undefined && name !== null} />
    );
}

بهذا حين يكون للـname قيمة ستكون خاصية disabled تساوي true، قد تقول "لكن المتصفح يقوم بعمل disable للـinput لمجرد وجود الخاصية"، لا تقلق بشأن ذلك ﻷن React لا يضيف الخاصية البوليانية إلا إذا كانت true.

أما حين تريد حذف أو تمرير خاصية غير بوليانية يمكن اللجوء للطريقة التالية:

const InputComponent = function() {    
	const isNumberInput = true;
    return (
      	
        <input type="text" pattern={isNumberInput ? "[0-9]+" : undefined} />
    );
}

عند إسناد undefined لخاصية فإنها لا تضاف للـHTML وكأنها لم تمرر

يمكنك تحديد ما إذا كان سيتم إضافة هذه الخاصية أم لا من خلال إضافة المتغير name نفسه ققيمة لها، React ذكي بما فيه الكفاية ليقوم بحذف الخاصية إن كانت تساوي false

const InputComponent = function() {
    const name = "My Name";

    return (
      	// بهذا الشكل لن تظهر الخاصية disable
        <input type="text" disabled={!name} />
    );
}

في المثال السابق يتم إعتبار نتيجة الشرط تساوي false لأن المتغير name يحتوي على قيمة، وبهذا لن يتم إضافة الخاصية disabled للعنصر input.

مرحباً @Adam Ebrahim
يمكنك فعل ما تريد كالآتي ( إذا كنت تريد props أن تكون dynamic ):
 

const InputComponent = function() {
    const name = "My Name";

    return (
      	// في هذا الجزء أريد أن يتم حذف الخاصية disable لأن المتغير name يحتوي على قيمة
        <input 
           type="text"
           {...(!name && { disabled: true })} 
/>
    );
}

لاحظ المثال السابق أننا قمنا بإضافة object فيه disabled prop في حالة لا يوجد name وبعد ذلك قمنا بعمل spread للأوبجيكت مع كل ال props

يجب ان تحدد معنى قيمة اولا لانه في هذه الحالة لا اظنك يجب ان تقلق على null و undefined فقط لذا يجب ان تسأل نفسك هل مثلا string فارغ قيمة مقبولة بالنسبة لك ام لا ويمكنك ان ترى في الكود في الاسفل ماهو truthy وما هو falsy

!null //true

!undefined //true

!" " //false

!0 //true

هذا يعتمد جدا على ما تريده انت فاذا كنت تريد ان تعطل العنصر في حالة لم يكن المتغير معرف او null فقط فيمكنك عكس قيمته المنطقية 

 <input type="text" disabled={!name} />

لكن ان كنت تريد تعطيله ايضا لما يتواجد عندك string فارغ مثلا ففي هذه الحالة ستقوم بربط سلاسل شرطية بما يناسبك