Apa artinya ...sisanya dalam Bereaksi BEJ

Maaf, saya menyadari bahwa jawaban pertama saya (sementara mudah-mudahan masih menyediakan berguna/konteks tambahan) doesn't menjawab pertanyaan anda. Mari saya coba lagi.

Anda bertanya:

saya ingin menjadi yakin bahwa { komponen: Komponen, ...sisanya } berarti:

Dari alat peraga, mendapatkan Komponen prop dan kemudian semua yang lain alat peraga yang diberikan kepada anda, dan mengubah nama alat peraga untuk istirahat sehingga anda dapat menghindari penamaan dengan isu-isu alat peraga melewati Rute yang membuat fungsi

Anda're interpretasi ini tidak cukup benar. Berdasarkan pikiran anda meskipun, itu terdengar seperti anda're setidaknya menyadari fakta bahwa apa yang terjadi di sini berjumlah semacam objek destructuring (lihat jawaban kedua dan komentar di sana untuk penjelasan lebih lanjut).

Untuk memberikan penjelasan yang akurat, let's memecah { komponen: Komponen, ...sisanya } ekspresi ke dalam dua operasi terpisah:

1. Operasi 1: Menemukan komponen properti yang didefinisikan pada alat peraga (Note: huruf kecil component) dan menetapkan ke lokasi baru di negara kita sebut Komponen (Note: modal Component).
2. Operasi 2: Kemudian, mengambil semua remaining sifat yang didefinisikan pada alat peraga objek dan mengumpulkan mereka dalam sebuah argumen yang disebut istirahat.

Yang penting adalah bahwa anda're TIDAK mengganti nama alat peraga untuk istirahat. (Dan juga tidak harus dilakukan dengan mencoba untuk "menghindari penamaan masalah dengan alat peraga melewati Rute yang membuat fungsi".)

rest === props;
// => false

Anda hanya menarik dari the rest (maka mengapa argumen yang bernama) dari sifat-sifat yang didefinisikan pada alat peraga objek ke dalam sebuah argumen baru yang disebut istirahat.

Contoh Penggunaan

const myObj = {
  name: 'John Doe',
  age: 35,
  sex: 'M',
  dob: new Date(1990, 1, 1)
};

Untuk contoh ini, mungkin membantu untuk hanya memikirkan alat peraga karena memiliki struktur yang sama (i.e., sifat-sifat dan nilai-nilai) seperti yang ditunjukkan pada myObj. Sekarang, let's menulis tugas berikut.

const { name: Username, ...rest } = myObj

Pernyataan di atas jumlah kedua deklarasi dan penugasan dari dua variabel (atau, saya kira, konstanta). Pernyataan tersebut dapat dipikirkan sebagai:

Mengambil harta nama yang didefinisikan pada myObj dan menetapkan nilai yang baru variabel yang kita sebut Username. Kemudian, mengambil apa pun sifat-sifat lainnya yang didefinisikan pada myObj (i.e., usia, sex dan dob) dan mengumpulkan mereka menjadi objek baru yang ditugaskan untuk variabel yang kita beri nama istirahat.

Logging Username dan istirahat untuk konsol akan mengkonfirmasi ini. Kami memiliki yang berikut:

console.log(Username);
// => John Doe

console.log(rest);
// => { age: 35, sex: 'M', dob: Mon Jan 01 1990 00:00:00 GMT-0800 (PST) }

Catatan

Mengapa pergi melalui kesulitan menarik dari komponen property hanya untuk mengubah nama Komponen dengan huruf kapital "C"?

Ya, tampaknya cukup sepele. Dan, sementara itu adalah standar Bereaksi praktek, ada's alasan semua Facebook's dokumentasi pada kerangka yang tertulis seperti itu. Yaitu, memanfaatkan komponen kustom yang diberikan dengan BEJ kurang praktek per se dari itu adalah sebuah kebutuhan. Bereaksi, atau lebih benar, BEJ adalah case-sensitive. Komponen kustom dimasukkan tanpa dikapitalisasi huruf pertama tidak diberikan ke DOM. Ini hanya bagaimana Bereaksi telah didefinisikan sendiri untuk mengidentifikasi komponen kustom. Dengan demikian, kalau misalnya tidak juga berganti nama menjadi komponen properti yang ditarik dari alat peraga untuk Komponen ini, <komponen {...alat peraga} /> ekspresi akan gagal untuk membuat benar.

Hal ini memungkinkan anda untuk "tidur" semua alat peraga dalam satu ungkapan singkat. Misalnya, let's menganggap alat peraga yang diterima oleh PrivateRoute komponen terlihat seperti

// `props` Object:
{
  thing1: 'Something',
  thing2: 'Something else'
}

Jika anda ingin lebih tangan dari barang-barang ini (i.e., thing1 dan thing2) ke bersarang <Komponen /> tag dan anda tidak't akrab dengan objek menyebar sintaks, anda mungkin menulis:

Namun, { ...alat peraga } sintaks menyingkirkan seperti bertele-tele dengan memungkinkan anda untuk spread anda alat peraga objek dengan cara yang sama yang mungkin spread sebuah array dari nilai-nilai (e.g., [...vals]). Dengan kata lain, JSX ekspresi di bawah dan yang di atas yang benar-benar setara.

Mari kita tetap sederhana. Dalam javaScript, jika kunci,pasangan nilai yang sama, obj={rekening:rekening} adalah sama seperti obj={rekening}. Jadi ketika melewati alat peraga dari orang tua kepada anak komponen:

const Input = ({name,label,error, ...rest}) => {
  return (
    <div className="form-group">
      {label}
      <input
        {...rest}
        autoFocus
        name={name}
        id={name}
        className="form-control"
        aria-describedby="emailHelp"
      />
    </div>
  );
};
export default Input;

anda akan melewati sisa alat peraga sebagai

label={label} placeholder={placeholder} type={type}