نحوه ایجاد یک کامپوننت دکمه قابل استفاده مجدد در NEXTJS

برای انجام فعالیت‌هایی، مانند تکمیل فرم یا باز کردن یک صفحه جدید، دکمه‌ها جزء رابط کاربری مکرر هستند. شما می توانید اجزای دکمه قابل استفاده مجدد را در Next.js بسازید که می توانید در بخش های مختلف برنامه خود از آنها استفاده کنید. در نتیجه، نگهداری از برنامه شما ساده‌تر خواهد شد و کد شما به صورت DRY (تکرار نکنید).

ابتدا باید یک فایل جدید در پوشه اجزای خود به نام ایجاد کنید Button.jsx به منظور ساخت یک جزء دکمه قابل استفاده مجدد. مرحله بعدی تعریف تابع “Button” است که پارامترها را می پذیرد text و onClick.

متنی که روی دکمه نمایش داده می شود در text پشتیبانی هنگامی که دکمه کلیک می شود، یک تابع مشخص شده توسط onClick prop فراخوانی خواهد شد.

در نهایت، شما باید یک عنصر “دکمه” را برگردانید که دارای این است text prop به متنی که روی دکمه نمایش داده می شود و onClick برای رویداد onclick دکمه روی کنترل کننده تنظیم شده است.

در اینجا مثالی از یک جزء دکمه قابل استفاده مجدد در Next.js آمده است:

const Button = ({ text, onClick }) => {
  return (
    <button
      type="button"
      style={{
        margin: 10px,
      }}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

export default Button;

هنگامی که مؤلفه دکمه قابل استفاده مجدد خود را ایجاد کردید، می توانید آن را به هر مؤلفه دیگری که می خواهید از آن استفاده کنید وارد کنید. برای مثال، می توانید مؤلفه ای به نام ایجاد کنید. MyComponent که از Button کامپوننت برای ارائه دکمه ای با متن “Click me!”.

در اینجا مثالی از نحوه استفاده از آن آورده شده است Button جزء در جزء دیگر:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    <div>
      <Button text="Click me!" onClick={() => console.log("Button clicked!")} />
    </div>
  );
};

export default MyComponent;

با این کار دکمه ای با متن “Click me!” نمایش داده می شود. هنگامی که دکمه کلیک می شود، console.log تابع فراخوانی می شود و پیام “دکمه کلیک شد!” به کنسول وارد می شود.

شما همچنین می توانید استفاده کنید Button جزء برای ایجاد دکمه با سبک های مختلف. برای مثال، می توانید یک کلاس به عنصر دکمه اضافه کنید تا یک سبک سفارشی اعمال شود. مثلا:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    <div>
      <Button text="Click me!" onClick={() => console.log("Button clicked!")} className="my-custom-class" />
    </div>
  );
};

export default MyComponent;

با این کار دکمه ای با متن “Click me!” نمایش داده می شود. دکمه نیز کلاس خواهد داشت my-custom-class به آن اعمال شود. می توانید از این کلاس برای استایل دادن به دکمه در فایل CSS خود استفاده کنید.