Melihat ini Bereaksi Router Dom v4 contoh https://reacttraining.com/react-router/web/example/auth-workflow saya melihat bahwa PrivateRoute komponen destructures istirahat prop seperti ini
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
fakeAuth.isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
)
Aku ingin menjadi yakin bahwa { komponen: Komponen, ...sisanya }
berarti:
Dari
alat peraga
, mendapatkan Komponen prop dan kemudian semua alat peraga lainnya yang diberikan kepada anda, dan mengubah namaalat peraga
untukistirahat
sehingga anda dapat menghindari penamaan masalah dengan alat peraga melewati Rute yangmembuat
fungsi
Aku benar?
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
, mendapatkanKomponen
prop dan kemudian semua yang lainalat peraga
yang diberikan kepada anda, dan mengubah namaalat peraga
untukistirahat
sehingga anda dapat menghindari penamaan dengan isu-isualat peraga
melewati Rute yangmembuat
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:
komponen
properti yang didefinisikan pada alat peraga
(Note: huruf kecil component) dan menetapkan ke lokasi baru di negara kita sebut Komponen
(Note: modal Component).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
.
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 padamyObj
dan menetapkan nilai yang baru variabel yang kita sebutUsername
. Kemudian, mengambil apa pun sifat-sifat lainnya yang didefinisikan padamyObj
(i.e.,usia
,sex
dandob
) dan mengumpulkan mereka menjadi objek baru yang ditugaskan untuk variabel yang kita beri namaistirahat
.
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) }
Mengapa pergi melalui kesulitan menarik dari
komponen
property hanya untuk mengubah namaKomponen
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:
<Component
thing1={ props.thing1 }
thing2={ props.thing2 } />
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.
<Component { ...props } />
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 htmlFor={name}>{label}</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}