تعلم React
وصف واجهة المستخدم UI

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

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

You will learn

  • كيفية تمرير strings باستخدام علامات التنصيص
  • كيفية الإشارة إلى متغير JavaScript داخل JSX باستخدام الأقواس المعقوفة
  • كيفية استدعاء دالة JavaScript داخل JSX باستخدام الأقواس المعقوفة
  • كيفية استخدام كائن JavaScript داخل JSX باستخدام الأقواس المعقوفة

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

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

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

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

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

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

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

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

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

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

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

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

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

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

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

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

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

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

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

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

حاول تغيير قيم backgroundColor و color.

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

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

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

Pitfall

خصائص style المضمنة تكتب بتنسيق camelCase. على سبيل المثال، عنصر HTML <ul style="background-color: black"> يتم كتابته في المكون الخاص بك على النحو التالي: <ul style={{ backgroundColor: 'black' }}>.

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

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

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

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

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

يمكن للمكوّن استخدام قيم من الكائن person كالتالي:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

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

Recap

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

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

Try out some challenges

Challenge 1 of 3:
أصلح الخطأ

هذا الكود يتعطل ويظهر خطأ Objects are not valid as a React child:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

هل يمكنك إيجاد المشكلة؟

Previousكتابة ترميز البناء بـ JSXNextPassing Props to a Component

How do you like these docs?