Bagaimana untuk mencipta komponen Butang boleh guna semula dalam ReactJS

Butang merupakan komponen UI yang tidak dapat dinafikan penting bagi mana-mana aplikasi tindak balas, butang mungkin digunakan dalam senario seperti menyerahkan borang atau membuka halaman baharu. Anda boleh membina komponen butang boleh guna semula dalam React.js yang boleh anda gunakan di seluruh bahagian aplikasi anda yang berbeza. Akibatnya, penyelenggaraan aplikasi anda akan menjadi lebih mudah dan kod anda akan dikekalkan KERING (Jangan Ulang Sendiri).

Anda mesti mencipta fail baharu dahulu dalam folder komponen anda bernama Button.jsx untuk membina komponen butang boleh guna semula. Langkah seterusnya ialah untuk menentukan fungsi "Butang", yang menerima teks parameter dan onClick.

Teks yang akan dipaparkan pada butang terkandung dalam prop teks. Apabila butang diklik, fungsi yang ditentukan oleh prop onClick akan dipanggil.

Akhir sekali, anda mesti mengembalikan elemen "butang" yang mempunyai prop teks ditetapkan pada teks untuk dipaparkan pada butang dan prop onClick ditetapkan kepada pengendali untuk acara onclick butang.

Berikut ialah contoh komponen butang boleh guna semula dalam React.js:

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

export default Button;

Sebaik sahaja anda telah mencipta komponen butang boleh guna semula anda, anda boleh mengimportnya ke dalam mana-mana komponen lain yang anda ingin gunakan. Contohnya, anda boleh mencipta komponen yang dipanggil MyComponent yang menggunakan komponen Butang untuk memaparkan butang dengan teks "Klik saya!".

Berikut ialah contoh cara menggunakan komponen Butang dalam komponen lain:

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

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

export default MyComponent;

Ini akan memaparkan butang dengan teks "Klik saya!". Apabila butang diklik, fungsi console.log akan dipanggil dan mesej "Butang diklik!" akan dilog ke konsol.

Anda juga boleh menggunakan komponen Butang untuk mencipta butang dengan gaya yang berbeza. Sebagai contoh, anda boleh menambah kelas pada elemen butang untuk menggunakan gaya tersuai. Contohnya:

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;

Ini akan memaparkan butang dengan teks "Klik saya!". Butang itu juga akan mempunyai kelas kelas tersuai saya yang digunakan padanya. Anda boleh menggunakan kelas ini untuk menggayakan butang dalam fail CSS anda.

Atas ialah kandungan terperinci Bagaimana untuk mencipta komponen Butang boleh guna semula dalam ReactJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!