تعتبر الأزرار مكونات مهمة لواجهة المستخدم لأي تطبيق تفاعلي، ويمكن استخدام الأزرار في سيناريوهات مثل إرسال نموذج أو فتح صفحة جديدة. يمكنك إنشاء مكونات أزرار قابلة لإعادة الاستخدام في React.js والتي يمكنك استخدامها في أقسام مختلفة من تطبيقك. ونتيجة لذلك، ستكون صيانة التطبيق الخاص بك أسهل وسيتم الاحتفاظ بالرمز الخاص بك جافًا (لا تكرر نفسك).

يجب عليك أولاً إنشاء ملف جديد في مجلد المكونات الخاص بك باسم Button.jsx لإنشاء مكون زر قابل لإعادة الاستخدام. الخطوة التالية هي تحديد وظيفة "الزر"، التي تقبل نص المعلمات وonClick.

النص الذي سيتم عرضه على الزر موجود في دعامة النص. عند النقر على الزر، سيتم استدعاء الوظيفة المحددة بواسطة خاصية onClick.

أخيرًا، يجب عليك إرجاع عنصر "زر" تم تعيين دعامة النص فيه على النص الذي سيتم عرضه على الزر وتم تعيين خاصية onClick على المعالج لحدث onclick الخاص بالزر.

إليك مثال لمكون زر قابل لإعادة الاستخدام في React.js:

const Button = ({ text, onClick }) => {
  return (
    
      {text}
    
  );
};

export default Button;

بمجرد إنشاء مكون الزر القابل لإعادة الاستخدام، يمكنك استيراده إلى أي مكون آخر تريد استخدامه فيه. على سبيل المثال، يمكنك إنشاء مكون يسمى MyComponent يستخدم مكون الزر لعرض زر مع النص "انقر فوقي!".

إليك مثال لكيفية استخدام مكون الزر في مكون آخر:

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

const MyComponent = () => {
  return (
    

       console.log("Button clicked!")} />
    
  );
};

export default MyComponent;

سيؤدي هذا إلى عرض زر يحتوي على النص "انقر فوقي!". عند النقر على الزر، سيتم استدعاء وظيفة console.log وظهور الرسالة "تم النقر على الزر!" سيتم تسجيل الدخول إلى وحدة التحكم.

يمكنك أيضًا استخدام مكون الزر لإنشاء أزرار بأنماط مختلفة. على سبيل المثال، يمكنك إضافة فئة إلى عنصر الزر لتطبيق نمط مخصص. على سبيل المثال:

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

const MyComponent = () => {
  return (
    

       console.log("Button clicked!")} className="my-custom-class" />
    
  );
};

export default MyComponent;

سيؤدي هذا إلى عرض زر يحتوي على النص "انقر فوقي!". سيتم أيضًا تطبيق الفئة my-custom-class على الزر. يمكنك استخدام هذه الفئة لتصميم الزر الموجود في ملف CSS الخاص بك.