JavaScript في JSX باستخدام الأقواس المعقوفة

يتيح لك JSX كتابة ترميز يشبه HTML داخل ملف JavaScript، مما يحافظ على منطق التصيير والمحتوى في نفس المكان. في بعض الأحيان، قد ترغب في إضافة القليل من منطق JavaScript أو الإشارة إلى خاصية ديناميكية داخل ذلك الترميز. في هذه الحالة، يمكنك استخدام الأقواس المعقوفة في JSX لفتح نافذة إلى JavaScript.

تمرير النصوص باستخدام علامات الاقتباس

عندما تريد تمرير سمة نصية إلى JSX، تضعه بين علامتي اقتباس مفردة أو مزدوجة:

هنا، يتم تمرير"https://i.imgur.com/7vQD0fPs.jpg" و "Gregorio Y. Zara" كنصوص.

ولكن ماذا لو أردت تحديدsrcأو نصaltبشكل ديناميكي؟ يمكنكاستخدام قيمة من JavaScript عن طريق استبدال" و "بـ{ و }:

لاحظ الفرق بينclassName="avatar"، الذي يحدد اسم فئة CSS"avatar"التي تجعل الصورة دائرية، وsrc={avatar}الذي يقرأ قيمة متغير JavaScript المسمىavatar. هذا لأن الأقواس المعقوفة تتيح لك العمل مع JavaScript مباشرة في ترميزك!

استخدام الأقواس المعقوفة: نافذة إلى عالم JavaScript

JSX هو طريقة خاصة لكتابة JavaScript. وهذا يعني أنه من الممكن استخدام JavaScript داخله - باستخدام الأقواس المعقوفة{ }. يعلن المثال أدناه أولاً عن اسم العالم،name، ثم يضمّنه باستخدام الأقواس المعقوفة داخل<h1>:

جرب تغيير قيمةname من 'Gregorio Y. Zara'إلى'Hedy Lamarr'. هل ترى كيف يتغير عنوان القائمة؟

أي تعبير JavaScript سيعمل بين الأقواس المعقوفة، بما في ذلك استدعاءات الدوال مثلformatDate():

أين تستخدم الأقواس المعقوفة

يمكنك استخدام الأقواس المعقوفة بطريقتين فقط داخل JSX:

1. كنصمباشرة داخل وسم JSX:<h1>{name}'s To Do List</h1>يعمل، لكن<{tag}>Gregorio Y. Zara's To Do List</{tag}>لن يعمل.
2. كسماتمباشرة بعد علامة=: src={avatar}سوف يقرأ متغيرavatar، لكنsrc="{avatar}"سيمرر النص"{avatar}".

استخدام "الأقواس المعقوفة المزدوجة": CSS وكائنات أخرى في JSX

بالإضافة إلى النصوص والأرقام والتعابير JavaScript الأخرى، يمكنك حتى تمرير كائنات في JSX. يُشار إلى الكائنات أيضًا باستخدام الأقواس المعقوفة، مثل{ name: "Hedy Lamarr", inventions: 5 }. لذلك، لتمرير كائن JS في JSX، يجب عليك لف الكائن في زوج آخر من الأقواس المعقوفة:person={{ name: "Hedy Lamarr", inventions: 5 }}.

قد ترى هذا مع أنماط CSS المضمنة في JSX. لا يتطلب React منك استخدام الأنماط المضمنة (فئات CSS تعمل بشكل رائع في معظم الحالات). ولكن عندما تحتاج إلى نمط مضمن، تمرر كائنًا إلى سمةstyle:

جرب تغيير قيمbackgroundColor و color.

يمكنك حقًا رؤية كائن JavaScript داخل الأقواس المعقوفة عندما تكتبه بهذه الطريقة:

في المرة القادمة التي ترى فيها{{ و }}في JSX، اعلم أنها ليست أكثر من كائن داخل الأقواس المعقوفة لـ JSX!

المزيد من المتعة مع كائنات JavaScript والأقواس المعقوفة

يمكنك نقل عدة تعبيرات إلى كائن واحد، والرجوع إليها في JSX الخاص بك داخل الأقواس المعقوفة:

في هذا المثال، يحتوي كائن JavaScript المسمىpersonعلى سلسلة نصيةnameوكائنtheme:

يمكن للمكون استخدام هذه القيم منpersonعلى النحو التالي:

تعتبر JSX لغة قوالب بسيطة جدًا لأنها تتيح لك تنظيم البيانات والمنطق باستخدام JavaScript.

ملخص

أنت الآن تعرف تقريبًا كل شيء عن JSX:

• يتم تمرير سمات JSX داخل علامات الاقتباس كسلاسل نصية.
• تتيح لك الأقواس المعقوفة إدخال المنطق والمتغيرات من JavaScript في ترميزك.
• تعمل داخل محتوى علامة JSX أو مباشرة بعد=في السمات.
• {{ و }}ليسا بناءً نحويًا خاصًا: إنهما كائن JavaScript موضوع داخل الأقواس المعقوفة لـ JSX.