مدیریت باز و بسته‌شدن آیتم‌ها

مقدمه

در درس قبل، ما ساختار اولیه منوی خود را با رندر کردن آیتم‌های سطح بالا ایجاد کردیم. در این درس، ما با استفاده از هوک useState، منوی خود را تعاملی خواهیم کرد تا بتوانیم زیرمنوها (dropdowns) را با کلیک کاربر نمایش داده یا پنهان کنیم.

پیاده‌سازی کامپوننت Dropdown

ابتدا، کامپوننت MenuItems را طوری تغییر می‌دهیم که بتواند زیرمنوها را نیز رندر کند. برای این کار، یک کامپوننت جدید به نام Dropdown می‌سازیم که مسئولیت نمایش آیتم‌های یک زیرمنو را بر عهده خواهد داشت.

JAVASCRIPT (React)

const Dropdown = ({ submenus, dropdown }) => {
  return (
    <ul className={`dropdown ${dropdown ? "show" : ""}`}>
      {submenus.map((submenu, index) => (
        <MenuItems items={submenu} key={index} />
      ))}
    </ul>
  );
};

این کامپوننت لیستی از آیتم‌های زیرمنو و یک متغیر state به نام dropdown را دریافت می‌کند. بر اساس مقدار dropdown، کلاس CSS مربوط به show برای نمایش یا پنهان کردن زیرمنو اضافه یا حذف می‌شود.

افزودن state برای مدیریت Dropdown

حالا به کامپوننت MenuItems یک state برای کنترل وضعیت باز یا بسته بودن زیرمنوی آن اضافه می‌کنیم.

JAVASCRIPT (React)

import { useState } from "react";
// ... (Dropdown component)

const MenuItems = ({ items }) => {
  const [dropdown, setDropdown] = useState(false);

  return (
    <li className="menu-items">
      {items.submenu ? (
        <>
          <button
            type="button"
            aria-haspopup="menu"
            aria-expanded={dropdown ? "true" : "false"}
            onClick={() => setDropdown((prev) => !prev)}
          >
            {items.title}{' '}
          </button>
          <Dropdown submenus={items.submenu} dropdown={dropdown} />
        </>
      ) : (
        <a href={items.url}>{items.title}</a>
      )}
    </li>
  );
};

در این نسخه بهبودیافته از MenuItems، ما ابتدا با useState یک متغیر state به نام dropdown با مقدار اولیه false ایجاد می‌کنیم.

سپس، با یک عبارت شرطی بررسی می‌کنیم که آیا آیتم فعلی (items) دارای یک زیرمنو است یا خیر. اگر زیرمنو وجود داشته باشد، به جای یک لینک ساده، یک دکمه رندر می‌کنیم. رویداد onClick این دکمه، state مربوط به dropdown را تغییر می‌دهد (toggle می‌کند). کامپوننت Dropdown نیز به صورت شرطی و بر اساس همین state نمایش داده می‌شود. اگر آیتم زیرمنو نداشته باشد، همان لینک ساده قبلی رندر می‌شود.

در این درس، با افزودن state و مدیریت رویدادهای کلیک، به منوی خود قابلیت نمایش زیرمنوهای تودرتو را اضافه کردیم. ما یاد گرفتیم که چگونه با استفاده از رندر شرطی و useState، کامپوننت‌های تعاملی بسازیم که به ورودی کاربر واکنش نشان می‌دهند.

اکنون که منطق اصلی منوی ما کامل شده است، در درس بعدی و پایانی این فصل، به «افزودن استایل و حالت‌های واکنش‌گرا» خواهیم پرداخت تا ظاهر منوی خود را بهبود داده و آن را برای نمایش در دستگاه‌های مختلف مانند موبایل آماده کنیم.