اضافه کردن کامپوننت محتویات همبرگر | پروژه عملی ری اکت

Adding Hamburger Contents Component

در این قسمت باید همبرگر خود را کدنویسی کنیم. تمرکز اصلی ما روی اضافه کردن یک کامپوننت برای مدیریت محتویات همبرگر است. بنابراین برای شروع کار درون پوشه components یک پوشه دیگر به نام Burger می سازم که حاوی موارد زیر است:

فایلی به نام js (همبرگر نمایش داده شده به کاربر)
پوشه ای به نام BurgerIngredient که خود دارای دو فایل به نام های BurgerIngredient.js و BurgerIngredient.module.css است.

از آنجایی که تمرکز این دوره روی نوشتن کدهای CSS نیست، من این کدها را از قبل برایتان نوشته ام تا شما آن ها را کپی کنید:

.BreadBottom {
    height: 13%;
    width: 80%;
    background: linear-gradient(#F08E4A, #e27b36);
    border-radius: 0 0 30px 30px;
    box-shadow: inset -15px 0 #c15711;
    margin: 2% auto;
}

.BreadTop {
    height: 20%;
    width: 80%;
    background: linear-gradient(#bc581e, #e27b36);
    border-radius: 50% 50% 0 0;
    box-shadow: inset -15px 0 #c15711;
    margin: 2% auto;
    position: relative;
}

.Seeds1 {
    width: 10%;
    height: 15%;
    position: absolute;
    background-color: white;
    left: 30%;
    top: 50%;
    border-radius: 40%;
    transform: rotate(-20deg);
    box-shadow: inset -2px -3px #c9c9c9;
}

.Seeds1:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: -170%;
    top: -260%;
    border-radius: 40%;
    transform: rotate(60deg);
    box-shadow: inset -1px 2px #c9c9c9;
}

.Seeds1:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: 180%;
    top: -50%;
    border-radius: 40%;
    transform: rotate(60deg);
    box-shadow: inset -1px -3px #c9c9c9;
}

.Seeds2 {
    width: 10%;
    height: 15%;
    position: absolute;
    background-color: white;
    left: 64%;
    top: 50%;
    border-radius: 40%;
    transform: rotate(10deg);
    box-shadow: inset -3px 0 #c9c9c9;
}

.Seeds2:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: 150%;
    top: -130%;
    border-radius: 40%;
    transform: rotate(90deg);
    box-shadow: inset 1px 3px #c9c9c9;
}

.Meat {
    width: 80%;
    height: 8%;
    background: linear-gradient(#7f3608, #702e05);
    margin: 2% auto;
    border-radius: 15px;
}

.Cheese {
    width: 90%;
    height: 4.5%;
    margin: 2% auto;
    background: linear-gradient(#f4d004, #d6bb22);
    border-radius: 20px;
}

.Salad {
    width: 85%;
    height: 7%;
    margin: 2% auto;
    background: linear-gradient(#228c1d, #91ce50);
    border-radius: 20px;
}

.Bacon {
    width: 80%;
    height: 3%;
    background: linear-gradient(#bf3813, #c45e38);
    margin: 2% auto;
}

با ذخیره کردن این فایل اتفاقی نمی افتد چرا که هنوز کامپوننت BurgerIngredient را تکمیل نکرده ایم. به فایل BurgerIngredient.js بروید تا این فایل را تکمیل کنیم:

import React from 'react';

const burgerIngredient = (props) => {

}

export default burgerIngredient;

تمام کامپوننت های کاربردی به همین شکل هستند، بنابراین ما هم از اینجا شروع می کنیم. از آنجایی که می خواهیم کدهای جاوا اسکریپت را درون این کامپوننت اجرا کنیم از {} به جای () استفاده کرده ایم. در واقع می خواهیم اطلاعات مربوط به ingredient را از props بگیریم؛ توجه داشته باشید که ingredient به معنی «مواد اولیه» مثل پنیر، گوشت و... است.

برای شروع متغیری به نام ingredient ایجاد کرده و مقدار آن را null می گذاریم تا در حالت پیش فرض چیزی نمایش داده نشود:

const burgerIngredient = (props) => {
    let ingredient = null;

}

حالا می نویسیم:

const burgerIngredient = (props) => {
    let ingredient = null;

    switch (props.type) {
        case ('bread-bottom'):
            ingredient = <div className={}></div>
    }
}

کد بالا یک دستور switch ساده است که یک prop خاص به نام type را دریافت میکند (ما هنوز این prop را تعریف نکرده ایم و باید از قسمت دیگری به این کامپوننت پاس داده شود) سپس موارد تا تک تک چک کرده ایم. مثلا اگر bread-bottom (نان زیرین) داشتیم متغیر ingredient باید برابر با یک div با کلاس خاصی شود. این کلاس ها را در همان فایل CSS بالا تعریف کرده ایم اما شما می توانید طبق سلیقه خود نام آن ها را تغییر دهید. برای استفاده از کلاس ها ابتدا باید فایل CSS را import کنیم:

import React from 'react';
import classes from './burgerIngredient.module.css';

const burgerIngredient = (props) => {
    let ingredient = null;

    switch (props.type) {
        case ('bread-bottom'):
            ingredient = <div className={classes.BreadBottom}></div>
    }
}

export default burgerIngredient;

کلاس BreadBottom قبلا در کدهای بالا تعریف شده است:

.BreadBottom {
    height: 13%;
    width: 80%;
    background: linear-gradient(#F08E4A, #e27b36);
    border-radius: 0 0 30px 30px;
    box-shadow: inset -15px 0 #c15711;
    margin: 2% auto;
}

حالا switch را کامل تر می کنیم:

    switch (props.type) {
        case ('bread-bottom'):
            ingredient = <div className={classes.BreadBottom}></div>;
            break;
        case ('bread-top'):
            ingredient = (
                <div className={classes.BreadTop}>
                    <div className={classes.Seeds1}></div>
                    <div className={classes.Seeds2}></div>
                </div>
            );
            break;
    }

در این case گفته ایم اگر bread-top (نان بالایی همبرگر) وجود داشت مقدار ingredient را برابر یک div قرار بده (کلاس BreadTop) که خود دارای دو div دیگر با کلاس های Seeds1 و Seeds2 است. منظور ما از seed همان دانه های کنجد روی نان همبرگر است. از آنجایی که نان بالایی دارای کنجد است، متغیر ingredient پیشرفته تر شده است و باید دانه های کنجد را نیز نشان بدهد، به همین دلیل از علامت پرانتز استفاده کرده ایم.

باز هم ادامه می دهیم و switch را تا انتها کامل می کنیم:

const burgerIngredient = (props) => {
    let ingredient = null;

    switch (props.type) {
        case ('bread-bottom'):
            ingredient = <div className={classes.BreadBottom}></div>;
            break;
        case ('bread-top'):
            ingredient = (
                <div className={classes.BreadTop}>
                    <div className={classes.Seeds1}></div>
                    <div className={classes.Seeds2}></div>
                </div>
            );
            break;
        case ('meat'):
            ingredient = <div className={classes.Meat}></div>;
            break;
        case ('cheese'):
            ingredient = <div className={classes.Cheese}></div>;
            break;
        case ('bacon'):
            ingredient = <div className={classes.Bacon}></div>;
            break;
        case ('salad'):
            ingredient = <div className={classes.Salad}></div>;
            break;
        default:
            ingredient = null;
    }
    return ingredient;
}

همانطور که می بینید در قسمت آخر متغیر ingredient را return کرده ایم. این ها تمام کلاس های CSS ای بود که به شما داده شد. در قسمت بعد می خواهیم PropType را اعتبار سنجی کنیم تا مطمئن شویم یک prop با نام type را دریافت خواهیم کرد، شما می توانید قبل از جلسه آینده خودتان این کار را انجام دهید؛ اگر یادتان باشد استفاده از پکیج PropType را در جلسات فصل قبل آموزش داده بودیم.