Apa yang ...
dilakukan dalam kode Bereaksi (menggunakan JSX) ini dan apa namanya?
<Modal {...this.props} title='Modal heading' animation={false}>
javascript
reactjs
Thomas Johansen
sumber
sumber
...
operator berperilaku berbeda dalam konteks yang berbeda. Dalam konteks ini, itu adalah operator "spread" yang dijelaskan di bawah ini oleh @TJ Crowder. Dalam konteks yang berbeda, ini juga bisa menjadi operator "istirahat" yang dijelaskan di bawah ini oleh @Tomas Nikodym.Jawaban:
Itu notasi sebaran properti . Itu ditambahkan dalam ES2018 (spread untuk array / iterables sebelumnya, ES2015), tetapi telah didukung dalam proyek Bereaksi untuk waktu yang lama melalui transpilasi (sebagai " atribut sebaran JSX " meskipun Anda bisa melakukannya di tempat lain juga, bukan hanya atribut ).
{...this.props}
menyebar properti enumerable "sendiri"props
sebagai properti diskrit padaModal
elemen yang Anda buat. Misalnya, jikathis.props
berisia: 1
danb: 2
, makaakan sama dengan
Tapi ini dinamis, jadi apa pun properti "milik" yang ada di dalamnya
props
disertakan.Karena
children
merupakan properti "milik sendiri"props
, spread akan memasukkannya. Jadi jika komponen tempat ini muncul memiliki elemen anak, mereka akan diteruskan keModal
. Menempatkan elemen anak di antara tag pembuka dan tag penutup hanyalah gula sintaksis - jenis yang bagus - untuk menempatkanchildren
properti di tag pembuka. Contoh:Tampilkan cuplikan kode
Notasi sebaran berguna tidak hanya untuk kasus penggunaan itu, tetapi untuk membuat objek baru dengan sebagian besar (atau semua) properti dari objek yang sudah ada - yang banyak muncul ketika Anda memperbarui keadaan, karena Anda tidak dapat mengubah keadaan langsung:
Itu menggantikan
this.state.foo
dengan objek baru dengan semua properti yang sama sepertifoo
kecualia
properti, yang menjadi"updated"
:Tampilkan cuplikan kode
sumber
children
properti atau yang mereka digabungkan?children
. Eksperimen memberi tahu saya anak-anak yang Anda berikan melalui atribut yang dipanggilchildren
dilindungi oleh tag yang Anda tentukan di antara tag awal dan akhir, tetapi jika itu adalah perilaku yang tidak terdefinisi, saya pasti tidak akan bergantung padanya.Seperti yang Anda ketahui
...
disebut Atribut Sebarkan yang mewakili nama itu memungkinkan ekspresi diperluas.Dan dalam hal ini (saya akan menyederhanakannya).
Ini:
adalah sama dengan
Jadi singkatnya, itu jalan pintas yang rapi , bisa kita katakan .
sumber
Tiga titik mewakili Operator Penyebaran di ES6. Ini memungkinkan kita melakukan beberapa hal dalam Javascript:
Array gabungan
Merusak susunan array
Menggabungkan dua objek
Ada kegunaan lain untuk tiga titik yang dikenal sebagai Parameter Istirahat dan memungkinkan untuk mengambil semua argumen ke fungsi sebagai satu array.
Berfungsi sebagai argumen array
sumber
Tiga titik dalam JavaScript adalah operator spread / rest .
Operator yang tersebar
The spread sintaks memungkinkan ekspresi diperluas di tempat-tempat di mana beberapa argumen diharapkan.
Parameter istirahat
The Sisanya sintaks parameter yang digunakan untuk fungsi dengan variabel jumlah argumen.
Operator spread / rest untuk array diperkenalkan pada ES6. Ada proposal State 2 untuk properti spread / rest property.
TypeScript juga mendukung sintaksis penyebaran dan dapat mentransformasikannya menjadi versi ECMAScript yang lebih lama dengan masalah kecil .
sumber
Ini adalah fitur ES6, yang digunakan dalam Bereaksi juga. Lihat contoh di bawah ini:
Cara ini baik-baik saja jika kita memiliki maksimal 3 parameter. Tapi, bagaimana jika kita perlu menambahkan misalnya 110 parameter. Haruskah kita mendefinisikan semuanya dan menambahkannya satu per satu?
Tentu saja ada cara yang lebih mudah untuk dilakukan, yang disebut SPREAD . Alih-alih melewati semua parameter yang Anda tulis:
Kami tidak tahu berapa banyak parameter yang kami miliki, tetapi kami tahu ada banyak parameter tersebut. Berdasarkan ES6, kita dapat menulis ulang fungsi di atas seperti di bawah ini dan menggunakan spread dan pemetaan di antara mereka untuk membuatnya semudah sepotong kue:
sumber
Itu hanya mendefinisikan alat peraga dengan cara yang berbeda di BEJ untuk Anda!
Ini menggunakan
...
array dan operator objek di ES6 (objek satu belum sepenuhnya didukung), jadi pada dasarnya jika Anda sudah mendefinisikan alat peraga Anda, Anda bisa meneruskannya ke elemen Anda dengan cara ini.Jadi dalam kasus Anda, kodenya harus seperti ini:
jadi alat peraga yang Anda tetapkan, sekarang dipisahkan dan dapat digunakan kembali jika perlu.
Itu sama dengan:
Ini adalah kutipan dari tim React tentang operator penyebaran di BEJ:
sumber
Bagi mereka yang datang dari dunia Python, JSX Spread Attributes setara dengan Unpacking Argument Lists (the Python
**
-operator).Saya sadar ini adalah pertanyaan BEJ, tetapi bekerja dengan analogi terkadang membantu untuk membuatnya lebih cepat.
sumber
The
...
(spread operator) digunakan dalam bereaksi terhadap:memberikan cara yang rapi untuk meneruskan alat peraga dari komponen induk ke anak. mis diberikan alat peraga ini dalam komponen induk,
mereka dapat diteruskan dengan cara berikut kepada anak,
yang mirip dengan ini
tapi jauh lebih bersih.
sumber
Tiga titik
...
mewakili Penyebar Operator atau Parameter Istirahat ,Ini memungkinkan ekspresi array atau string atau apa pun yang dapat iterasi untuk diperluas di tempat-tempat di mana nol atau lebih argumen untuk panggilan fungsi atau elemen untuk array diharapkan.
Perhatikan bahwa
foo
properti obj1 telah ditimpa olehfoo
properti obj2Catatan: Sebarkan sintaks (selain dari kasus properti sebaran) dapat diterapkan hanya pada objek yang dapat diubah: Jadi, berikut ini akan membuang kesalahan
Referensi1
Referensi2
sumber
Kudos to Brandon Morelli. Dia menjelaskan dengan sempurna di sini , tetapi tautan mungkin mati sehingga saya hanya menempelkan konten di bawah ini:
Sintaksis sebarannya hanya tiga titik:
...
Ini memungkinkan iterable untuk berkembang di tempat-tempat di mana 0+ argumen diharapkan. Definisi itu sulit tanpa konteks. Mari kita telusuri beberapa kasus penggunaan yang berbeda untuk membantu memahami apa artinya ini.Contoh # 1 - Memasukkan Array Lihatlah kode di bawah ini. Dalam kode ini, kami tidak menggunakan sintaks spread:
Di atas, kami telah membuat array bernama
mid
. Kami kemudian membuat array kedua yang berisimid
array kami . Akhirnya, kami keluar hasilnya. Apa yang Anda harapkanarr
untuk dicetak? Klik jalankan di atas untuk melihat apa yang terjadi. Berikut hasilnya:Apakah itu hasil yang Anda harapkan? Dengan memasukkan
mid
array ke dalamarr
array, kita telah berakhir dengan sebuah array di dalam array. Tidak apa-apa jika itu tujuannya. Tetapi bagaimana jika Anda hanya menginginkan satu array dengan nilai 1 hingga 6? Untuk mencapai hal ini, kita dapat menggunakan sintaks spread! Ingat, sintaksis sebar memungkinkan elemen array kami berkembang. Mari kita lihat kode di bawah ini. Semuanya sama - kecuali kita sekarang menggunakan sintaks spread untuk menyisipkanmid
array ke dalamarr
array:Dan ketika Anda menekan tombol run, inilah hasilnya:
Luar biasa! Ingat definisi sintaksis penyebaran yang baru saja Anda baca di atas? Di sinilah ia berperan. Seperti yang Anda lihat, ketika kita membuat
arr
array dan menggunakan operator spread padamid
array, alih-alih hanya dimasukkan,mid
array akan melebar. Ekspansi ini berarti bahwa setiap elemen dalammid
array dimasukkan ke dalamarr
array. Alih-alih array bersarang, hasilnya adalah array tunggal angka mulai dari 1 hingga 6.Contoh # 2 - Matematika JavaScript memiliki objek matematika bawaan yang memungkinkan kita melakukan beberapa perhitungan matematika yang menyenangkan. Dalam contoh ini kita akan melihat
Math.max()
. Jika Anda tidak terbiasa,Math.max()
kembalikan angka terbesar dari nol atau lebih. Berikut ini beberapa contoh:Seperti yang Anda lihat, jika Anda ingin menemukan nilai maksimum dari beberapa angka,
Math.max()
memerlukan beberapa parameter. Sayangnya Anda tidak bisa menggunakan satu array sebagai input. Sebelum sintaksis sebar, cara termudah untuk menggunakanMath.max()
array adalah menggunakan.apply()
Berhasil, itu benar-benar menjengkelkan. Sekarang lihat bagaimana kita melakukan hal yang persis sama dengan sintaks spread:
Daripada harus membuat fungsi dan menggunakan metode yang berlaku untuk mengembalikan hasil
Math.max()
, kita hanya perlu dua baris kode! Sintaks spread memperluas elemen array kami dan memasukkan setiap elemen dalam array kami secara individual ke dalamMath.max()
metode!Contoh # 3 - Salin Array Dalam JavaScript, Anda tidak bisa hanya menyalin array dengan mengatur variabel baru sama dengan array yang sudah ada. Perhatikan contoh kode berikut:
Saat Anda menekan run, Anda akan mendapatkan output berikut:
Sekarang, pada pandangan pertama, sepertinya berhasil - sepertinya kita telah menyalin nilai arr ke arr2. Tapi bukan itu yang terjadi. Anda lihat, ketika bekerja dengan objek dalam javascript (array adalah jenis objek) kami menetapkan dengan referensi, bukan oleh nilai. Ini berarti bahwa arr2 telah ditetapkan ke referensi yang sama dengan arr. Dengan kata lain, apa pun yang kita lakukan untuk arr2 juga akan memengaruhi array array asli (dan sebaliknya). Lihatlah di bawah ini:
Di atas, kami telah mendorong elemen baru d ke arr2. Namun, ketika kita keluar nilai arr, Anda akan melihat bahwa nilai d juga ditambahkan ke array itu:
Tidak perlu takut! Kita bisa menggunakan operator spread! Pertimbangkan kode di bawah ini. Hampir sama dengan di atas. Alih-alih, kami menggunakan operator spread dalam sepasang tanda kurung:
Hit run, dan Anda akan melihat output yang diharapkan:
Di atas, nilai-nilai array dalam arr diperluas menjadi elemen individual yang kemudian ditugaskan ke arr2. Kita sekarang dapat mengubah array arr2 sebanyak yang kita inginkan tanpa konsekuensi pada array arr asli:
Sekali lagi, alasan ini berfungsi adalah karena nilai arr diperluas untuk mengisi tanda kurung definisi array arr2 kami. Dengan demikian, kita mengatur arr2 untuk sama dengan nilai individual dari arr daripada referensi ke arr seperti yang kita lakukan pada contoh pertama.
Contoh Bonus - String to Array Sebagai contoh terakhir yang menyenangkan, Anda dapat menggunakan sintaks spread untuk mengubah string menjadi array. Cukup gunakan sintaks spread dalam sepasang tanda kurung:
sumber
Tiga titik
(...)
disebut operator spread, dan ini secara konseptual mirip dengan operator spread array ES6, JSX mengambil keuntungan dari standar yang didukung dan dikembangkan ini untuk memberikan sintaksis yang lebih bersih di JSXReferensi:
1) https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties
2) https://facebook.github.io/react/docs/jsx-spread.html
sumber
Arti dari ... tergantung di mana Anda menggunakannya dalam kode,
sumber
Ini operator penyebaran ...
Misalnya jika Anda memiliki array
first=[1,2,3,4,5]
dan lainnyasecond=[6,7,8]
.[...first, ...second] //result is [1,2,3,4,5,6,7,8]
Hal yang sama juga bisa dilakukan dengan objek json.
sumber
Singkatnya, tiga titik
...
adalah operator yang menyebar di ES6 (ES2015). Operator yang menyebar akan mengambil semua data.Akan memberikan hasilnya [1,2,3,4,5,6]
Akan memberikan hasilnya [7,8,1,2,3,4]
sumber
Biasanya disebut operator spread, digunakan untuk memperluas di mana pun diperlukan
contoh
Anda dapat menggunakan ini di mana pun Anda membutuhkannya lebih lanjut tentang menyebar operator Menyebarkan sintaks .
sumber
sumber
... sintaks ini adalah bagian dari ES6 dan bukan sesuatu yang hanya dapat Anda gunakan dalam React. Ini dapat digunakan dalam dua cara yang berbeda; sebagai operator penyebar ATAU sebagai parameter lainnya. Anda dapat menemukan lebih banyak dari artikel ini: https://www.techiediaries.com/react-spread-operator-props-setstate/
apa yang telah Anda sebutkan dalam pertanyaan adalah sesuatu seperti ini, mari kita asumsikan seperti ini,
dengan menggunakan operator spread, Anda dapat meneruskan properti ke komponen seperti ini.
sumber
Ini adalah praktik umum untuk menyebarkan alat peraga dalam aplikasi Bereaksi. Dalam melakukan ini kami dapat menerapkan perubahan status ke komponen anak terlepas dari apakah itu Murni atau Tidak Murni (stateless atau stateful). Ada saat-saat ketika pendekatan terbaik, ketika melewati alat peraga, adalah lulus dalam sifat tunggal atau seluruh objek sifat. Dengan dukungan untuk array di ES6, kami diberi notasi "..." dan dengan ini kami sekarang dapat mencapai dengan menyerahkan seluruh objek ke anak.
Proses tipikal menyerahkan alat peraga kepada seorang anak dicatat dengan sintaks ini:
Ini bagus untuk digunakan ketika jumlah alat peraga minimal tetapi menjadi tidak terkendali ketika jumlah alat peraga menjadi terlalu tinggi. Masalah dengan metode ini terjadi ketika Anda tidak tahu properti yang dibutuhkan dalam komponen turunan dan metode JavaScript yang umum adalah dengan mengatur properti tersebut secara sederhana dan mengikat objek nanti. Ini menyebabkan masalah dengan pemeriksaan propType dan kesalahan pelacakan tumpukan samar yang tidak membantu dan menyebabkan keterlambatan dalam debugging. Berikut ini adalah contoh dari praktik ini, dan apa yang tidak boleh dilakukan:
Hasil yang sama ini dapat dicapai tetapi dengan keberhasilan yang lebih tepat dengan melakukan ini:
Tetapi tidak menggunakan JSX spread atau JSX sehingga untuk mengulang ini kembali ke persamaan sekarang kita bisa melakukan sesuatu seperti ini:
Properti yang termasuk dalam "... alat peraga" adalah foo: x, bar: y. Ini dapat digabungkan dengan atribut lain untuk mengesampingkan properti "... props" menggunakan sintaks ini:
Selain itu kami dapat menyalin objek properti lainnya satu sama lain atau menggabungkannya dengan cara ini:
Atau gabungkan dua objek berbeda seperti ini (ini belum tersedia di semua versi reaksi):
Cara lain untuk menjelaskan hal ini, menurut situs reaksi / dokumen Facebook adalah:
Jika Anda sudah memiliki "alat peraga" sebagai objek, dan Anda ingin meneruskannya di JSX, Anda dapat menggunakan "..." sebagai operator SPREAD untuk melewatkan seluruh objek alat peraga. Dua contoh berikut ini setara:
Atribut yang menyebar dapat bermanfaat saat Anda membangun wadah generik. Namun, mereka juga dapat membuat kode Anda berantakan dengan membuatnya mudah untuk melewatkan banyak alat peraga yang tidak relevan ke komponen yang tidak peduli tentang mereka. Sintaks ini harus digunakan dengan hemat.
sumber
Ini disebut operator penyebaran. Untuk misalnya let hello = {name: '', msg: ''} let hello1 = {... hello} Sekarang hello object properties disalin ke hello1.
sumber
Ini disebut sintaks spread dalam javascript.
Ini digunakan untuk merusak array atau objek dalam javascript.
contoh:
Anda dapat melakukannya dengan hasil yang sama dengan
Object.assign()
fungsi dalam javascript.Referensi: Sebarkan sintaks
sumber
Ini akan dikompilasi menjadi:
di mana ia memberi lebih dua properti
title
& dianimation
luarprops
elemen host....
adalah operator ES6 yang disebut Spread .Lihat https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
sumber
spread operator (triple operator) memperkenalkan di ecama script 6 (ES6) .Ecama script (ES6) adalah pembungkus javascript.
sebarkan properti enumerable operator dalam alat peraga. this.props = {firstName: 'Dan', lastName: 'Abramov', kota: 'New York', negara: 'USA'}
Tetapi operator penyebaran fitur utama digunakan untuk jenis referensi.
Ini disebut tipe referensi, satu objek mempengaruhi objek lain karena mereka dapat dibagikan dalam memori. Jika Anda mendapatkan nilai secara independen berarti menyebar memori, gunakan operator spread.
sumber
jika Anda memiliki array elemen dan Anda ingin menampilkan elemen yang baru saja Anda gunakan ... arrayemaments dan itu akan beralih ke semua elemen
sumber
...
(tiga titik dalam Javascript) disebut Spread Syntax atau Spread Operator. Ini memungkinkan iterable seperti ekspresi array atau string untuk diperluas atau ekspresi objek diperluas di mana pun ditempatkan. Ini tidak spesifik untuk Bereaksi. Ini adalah operator Javascript.Semua jawaban ini di sini sangat membantu, tetapi saya ingin menuliskan Kasus-kasus Penggunaan Sintaks Penyebar (Operator Penyebar) yang paling banyak digunakan.
1. Combine Arrays (Concatenate Arrays)
Ada berbagai cara untuk menggabungkan array , tetapi operator spread memungkinkan Anda untuk menempatkan ini di sembarang tempat dalam array. Jika Anda ingin menggabungkan dua array dan elemen tempat pada titik mana pun dalam array, Anda dapat melakukan hal berikut:
2. Menyalin Array
Ketika kami menginginkan salinan array, kami dulu memiliki metode Array.prototypr.slice () . Tapi, Anda bisa melakukan hal yang sama dengan operator spread.
3. Fungsi Panggilan tanpa Terapkan
Dalam ES5, untuk meneruskan array dua angka ke
doStuff()
fungsi, Anda sering menggunakan metode Function.prototype.apply () sebagai berikut:Namun, dengan menggunakan operator spread, Anda dapat mengirimkan array ke dalam fungsi.
4. Array Destrukturisasi
Anda dapat menggunakan destrrukturisasi dan operator lainnya bersama-sama untuk mengekstraksi informasi ke dalam variabel sesuai keinginan Anda:
5. Fungsi Argumen sebagai Parameter Istirahat
ES6 juga memiliki tiga titik (...) yang merupakan parameter istirahat yang mengumpulkan semua argumen fungsi yang tersisa ke dalam array.
6. Menggunakan Fungsi Matematika
Setiap fungsi di mana spread digunakan sebagai argumen dapat digunakan oleh fungsi yang dapat menerima sejumlah argumen.
7. Menggabungkan Dua Objek
Anda dapat menggunakan operator spread untuk menggabungkan dua objek. Ini adalah cara yang mudah dan bersih untuk melakukannya.
8. Pisahkan String menjadi Karakter Terpisah
Anda dapat menggunakan operator spread untuk menyebarkan string ke karakter yang terpisah.
Anda dapat memikirkan lebih banyak cara untuk menggunakan Penyebar Operator. Apa yang saya daftarkan di sini adalah kasus penggunaan yang populer.
sumber
Ini adalah fitur baru di ES6 / Harmony. Ini disebut Penyebar Operator. Ini memungkinkan Anda memisahkan bagian konstituen dari array / objek, atau mengambil beberapa item / parameter dan merekatkannya bersama-sama. Berikut ini sebuah contoh:
Dan dengan objek / kunci:
Apa yang benar-benar keren adalah Anda dapat menggunakannya untuk berarti "sisa nilai".
sumber
Itu disebut spread. Sama seperti namanya. Itu berarti meletakkan apa pun nilainya dalam array atau objek tersebut.
Seperti :
sumber