العمليات الرياضية داخل الأقواس

جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 7 من 42.

لا تقتصر الأقواس على احتواء المتغيرات فحسب: بل تعمل مع أي تعبير JavaScript. العمليات الحسابية، ودوال السلاسل النصية، واستدعاءات الدوال:

const price = 6;
const quantity = 5;

return <p>Total: {price * quantity}</p>;
// يعرض: Total: 30

يقوم React بتقييم التعبير ويعرض النتيجة. يمكنك دمج النص والأقواس بحرية في عنصر واحد:

<p>{quantity} items at {price} each</p>

شيء واحد لا ينبغي وضعه داخل الأقواس المعقوفة: البيانات البرمجية (statements). فالعبارات مثل if و for وما شابههما ليست تعبيرات (expressions). سنتعرف على بدائلها المناسبة لـ JSX في فصل لاحق.

التحدي

مبتدئ

أنشئ إيصالاً صغيراً. يُعرّف المكون price و quantity.

اجعل الفقرة التي تحتوي على id="total" تعرض Total: 30، ولكن قم بحساب الرقم من المتغيرات باستخدام *، ولا تكتب 30 مباشرةً.

جرّب بنفسك

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>