Asas aplikasi React adalah komponen. Ia hampir mustahil untuk membina aplikasi React tanpa menggunakan komponen. Penggunaan komponen yang meluas bahkan telah membawa kepada beberapa pakej pihak ketiga yang menyediakan komponen yang boleh digunakan untuk keupayaan integrasi.

Komponen pihak ketiga ini biasanya boleh diguna semula . Perbezaan antara mereka dan komponen yang mungkin tersedia dalam aplikasi anda adalah kekhususan .

Maksud saya: Katakan anda menjalankan syarikat yang menjual baju polo, anda boleh melakukan ini:

1. Menghasilkan baju polo yang telah dicetak dengan corak, atau
2. Biarkan pembeli memilih corak yang mereka mahu.

Sesetengah elemen asas akan tetap konsisten, contohnya, semua baju polo harus dilengkapkan pendek. Tetapi pengguna boleh memilih gaya baju yang berbeza, seperti warna dan saiz. Dalam kes ini, kemeja polo lengan pendek adalah komponen reaksi yang baik: ia adalah item yang sama dengan variasi yang berbeza.

Sekarang katakan anda sedang membangunkan borang log masuk. Seperti baju polo, bentuk mempunyai ciri -ciri yang konsisten, tetapi kami tidak memberi tumpuan kepada saiz dan perubahan warna, tetapi medan input, menyerahkan butang, dan mungkin juga lupa pautan kata laluan. Ini boleh komponen dan melaksanakan pelbagai perubahan dalam input, butang, pautan, dll.

Contoh elemen input

Mari kita lihat dari perspektif membuat medan input untuk borang tersebut. Input teks biasa dalam komponen React kelihatan seperti ini:

 Bentuk kelas memanjangkan reaksi.comPonent {
  pembina (props) {
    super (props);
    this.state = {
      Nama Pengguna: ''
    };
  }

  handlechange = (event) => {
    this.setState ({username: event.target.value});
  };

  render () {
    Kembali (
      

Agar elemen input ini boleh diguna semula di tempat lain dan dalam projek, kita perlu mengeluarkannya ke dalam komponennya sendiri. Mari namakannya forminput.

 Import bertindak balas daripada 'bertindak balas';
import proptypes dari 'prop-types';

const forminput = ({
  nama,
  taip,
  pemegang tempat,
  Onchange,
  nama kelas,
  nilai,
  ralat,
  kanak -kanak,
  label,
  ... props
}) => {

  Kembali (
    <div>
      <label htmlfor="{name}">{label}</label>
      <input type="{type}" name="{name}" placeholder="{placeholder}" onchange="{onChange}" classname="{className}" value="{value}">
      {ralat &&<p> {ralat}</p> }
    </div>
  );
};

FormInput.DefaultProps = {
  Taip: "Teks",
  Nama Class: ""
};

FormInput.proptypes = {
  Nama: proptypes.string.isrequired,
  Jenis: proptypes.oneof (['teks', 'nombor', 'kata laluan']),
  Pemegang tempat: proptypes.string.isrequired,
  CLASSNAME: proptypes.string,
  Nilai: proptypes.any,
  Onchange: proptypes.func.isrequired,
  Label: proptypes.string.isrequired // ditambah label yang diperlukan Prop
};

Eksport forminput lalai;

Komponen ini menerima alat tertentu, seperti sifat yang kita perlukan untuk membuat input menggunakan tag yang sah, termasuk ruang letak, nilai, dan nama. Kami menetapkan elemen input dalam fungsi render dan menetapkan nilai harta kepada prop yang dihantar kepada komponen. Kami juga mengikat input ke tag untuk memastikan mereka sentiasa bersama. Anda dapat melihat bahawa kami tidak membuat andaian dengan apa -apa yang telah ditetapkan. Matlamat kami adalah untuk memastikan bahawa komponen boleh digunakan dalam seberapa banyak senario yang mungkin.

Ini membentuk komponen yang baik kerana ia menguatkuasakan markup yang baik (apa yang Brad Frost menyebutnya "React Dumb"), yang menunjukkan bahawa tidak setiap komponen mestilah semacam fungsi yang sangat kompleks. Bahawa dikatakan, jika kita bercakap tentang sesuatu yang sangat asas, seperti tajuk statik, maka menggunakan komponen React mungkin sedikit berlebihan. Kriteria yang mungkin untuk membuat sesuatu sebagai komponen yang boleh diguna semula adalah apabila anda perlu menggunakan fungsi yang sama di bahagian lain aplikasi anda. Jika komponen digunakan hanya sekali, komponen "boleh diguna semula" biasanya tidak diperlukan.

Kami boleh menggunakan komponen input kami dalam login komponen lain.

 Import React, {Component} dari 'React';
import forminput dari './forminput'; // komponen forminput import

Login kelas memanjangkan komponen {
  Negeri = {
    Pengguna: {
      Nama pengguna: "",
      Kata Laluan: ""
    },
    Kesalahan: {},,
    Dihantar: Salah
  };

  handlechange = event => {
    const {user} = this.state;
    pengguna [event.target.name] = event.target.value;
    this.setState ({user});
  };

  onSubmit = (event) => {
    event.PreventDefault (); // Mencegah penyerahan borang lalai
    const {user} = this.state;
    biarkan ralat = {};

    jika (! user.username) {
      errors.username = "Masukkan nama pengguna anda!";
    }

    jika (user.password.length 
        {Dihantar? (
          <p>Selamat datang di atas kapal, {user.username}!</p>
        ): (
          <div>
            <h3>Log masuk!</h3>
            <forminput name="username" label="Username" placeholder="Enter your username" value="{user.username}" onchange="{this.handleChange}" error="{errors.username}"></forminput>
            <forminput name="password" type="password" label="Password" placeholder="Enter your password" value="{user.password}" onchange="{this.handleChange}" error="{errors.password}"></forminput>
            <button type="submit">Log masuk</button>
          </div>
        )}
      
    );
  }
}

Login lalai eksport;

Pernahkah anda melihat bagaimana Login menggunakan FormInput dua kali? Kami menggunakannya sebagai input teks untuk kedua -dua nama pengguna dan kata laluan. Jika kita mahu mengubah fungsi input, kita boleh membuat perubahan ini dalam fail komponen Forminput yang kita buat, dan perubahan ini akan digunakan untuk setiap contoh menggunakan komponen input. Ini adalah kelebihan asas untuk mempunyai komponen yang boleh diguna semula: anda tidak perlu mengulangi diri anda .

Malah ralat dipaparkan dari komponen Forminput.

Fungsi onsubmit pertama mengesahkan objek pengguna yang kami dapat dari borang untuk memastikan ia mematuhi struktur di mana nama pengguna mempunyai nilai. Perhatikan bahawa kita juga boleh melanjutkan fungsi input, seperti yang kita lakukan, memeriksa jika kata laluan mengandungi sekurang -kurangnya lapan aksara.

Jika anda melihat kod tersebut, anda akan melihat bahawa terdapat komponen butang di dalamnya. Ini berbeza daripada elemen HTML, tetapi sebaliknya komponen yang berbeza yang mengambil alat peraga yang menentukan jenis butang yang kami mahu (serahkan, menetapkan semula, butang), nama kelasnya, apa yang perlu dilakukan apabila diklik, dan label. Kami boleh mengintegrasikan banyak sifat butang lain untuk menguatkuasakan standard yang anda mahukan.

 Const Button = ({Type, ClassName, OnClick, Label, ... Props}) => (
  <button type="{type}" classname="{className}" onclick="{onClick}">
    {label}
  </button>
);

butang lalai eksport;

Ini adalah borang log masuk terakhir selepas meletakkan semua komponen bersama -sama.

Mahu mencubanya sendiri? Cuba gunakan semula<input> elemen. Sekiranya ini terlalu sukar, anda boleh<input> Elemen bermula, maka mungkin kotak semak, dan kemudian melompat ke<select></select> . Idea utama adalah untuk menjadikannya universal. Saya ingin melihat pencapaian anda, jadi sila hubungkan kerja anda di bahagian komen!

Atas ialah kandungan terperinci Menunjukkan komponen reaksi yang boleh diguna semula dalam bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!