الأقواس في السمات

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

تأتي الأقواس المزخرفة في السمات (attributes) أيضًا. استبدل علامات الاقتباس بالأقواس وستأتي قيمة السمة من JavaScript:

const level = 'warning';

return <p className={level}>Check this!</p>;

الآن أصلح كلاس الفقرة هو كل ما تحتويه المتغيرات: قم بتغيير level إلى 'error' وسوف يتبعه الكلاس. هذه هي الطريقة التي تقوم بها تطبيقات React بتبديل الأنماط بناءً على البيانات.

لاحظ التنسيق بدقة: className={level}، من دون أقواس تنصيص حول الأقواس المزخرفة. إن استخدام className="{level}" (مع أقواس التنصيص) سيضبط الفئة لتكون النص الحرفي {level}.

التحدي

سهل

يجب أن تحصل فقرة التنبيه (alert) على فئة CSS الخاصة بها من المتغير level.

اضبط className الخاص بالفقرة على قيمة level باستخدام الأقواس المعقوفة (يجب أن تنتهي الفئة الخاصة بها لتصبح warning).
لا تكتب كلمة warning في الخاصية. استخدم المتغير.

جرّب بنفسك

<!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>