Ashutosh Mishra
Belajarlah lagi
PELAJARI LEBIH LANJUT TENTANG KEAHLIAN @ASHUTOSHMISHRA DAN TEMPATNYA DI INTERNET
CERITA TERKAIT
MEMUAT
. . komentar & lainnya
Hackernoon hq - po box 2206, edwards, colorado 81632, usa
React mengimplementasikan sistem DOM independen-browser untuk kinerja dan kompatibilitas lintas-browser. Kami mengambil kesempatan untuk membersihkan beberapa sisi kasar dalam implementasi DOM browser
Di React, semua properti dan atribut DOM (termasuk event handler) harus menggunakan camelCase. Misalnya, atribut HTML tabindex sesuai dengan atribut tabIndex di React. Pengecualian adalah aria-* dan const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }0 atribut, yang harus ditulis dengan huruf kecil. Misalnya, Anda dapat menyimpan const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }_1 sebagai const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }1
Perbedaan Atribut
Ada sejumlah atribut yang bekerja secara berbeda antara React dan HTML
diperiksa
Atribut const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }3 didukung oleh const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }4 komponen bertipe const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }5 atau const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }6. Anda dapat menggunakannya untuk mengatur apakah komponen dicentang. Ini berguna untuk membangun komponen yang dikendalikan. const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }7 adalah padanan tak terkendali, yang menetapkan apakah komponen diperiksa saat pertama kali dipasang
nama kelas
Untuk menentukan kelas CSS, gunakan atribut const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }8. Ini berlaku untuk semua elemen DOM dan SVG reguler seperti const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }9, const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }0, dan lainnya
Jika Anda menggunakan React dengan Komponen Web (yang tidak umum), gunakan atribut const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }1 sebagai gantinya
berbahayaSetInnerHTML
const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }_2 adalah pengganti React untuk menggunakan const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }3 di DOM browser. Secara umum, menyetel HTML dari kode berisiko karena mudah untuk secara tidak sengaja mengekspos pengguna Anda ke serangan skrip lintas situs (XSS). Jadi, Anda dapat menyetel HTML langsung dari React, tetapi Anda harus mengetikkan const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }2 dan meneruskan objek dengan kunci const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }5, untuk mengingatkan diri sendiri bahwa itu berbahaya. Sebagai contoh
function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup()} />; }
htmlUntuk
Karena const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }_6 adalah kata yang dicadangkan dalam JavaScript, elemen React menggunakan const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }7 sebagai gantinya
dalam perubahan
Acara const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }_8 berperilaku seperti yang Anda harapkan. setiap kali bidang formulir diubah, acara ini diaktifkan. Kami sengaja tidak menggunakan perilaku browser yang ada karena const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }8 adalah nama yang salah untuk perilakunya dan React mengandalkan peristiwa ini untuk menangani input pengguna secara real time
terpilih
Jika Anda ingin menandai // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>_0 sebagai yang dipilih, referensikan nilai opsi tersebut di // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>1 dari // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>2 sebagai gantinya. Lihat untuk petunjuk terperinci
gaya
Catatan
Beberapa contoh dalam dokumentasi menggunakan // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>_3 untuk kenyamanan, tetapi menggunakan atribut // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>3 sebagai sarana utama elemen gaya umumnya tidak disarankan. Dalam kebanyakan kasus, harus digunakan untuk mereferensikan kelas yang ditentukan dalam stylesheet CSS eksternal. // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>3 paling sering digunakan dalam aplikasi React untuk menambahkan gaya yang dihitung secara dinamis pada waktu render. Lihat juga FAQ. Gaya dan CSS
Atribut // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>_3 menerima objek JavaScript dengan properti camelCase daripada string CSS. Ini konsisten dengan properti JavaScript DOM // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>_3, lebih efisien, dan mencegah lubang keamanan XSS. Sebagai contoh
const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }
Perhatikan bahwa gaya tidak diberi awalan otomatis. Untuk mendukung browser lama, Anda perlu menyediakan properti gaya yang sesuai
const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }
Kunci gaya adalah camelCase agar konsisten dengan mengakses properti pada node DOM dari JS (mis. g. // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>_9). Prefiks vendor selain <div tabIndex={-1} /> // Just like node.tabIndex DOM API <div className="Button" /> // Just like node.className DOM API <input readOnly={true} /> // Just like node.readOnly DOM API0 harus dimulai dengan huruf kapital. Inilah sebabnya mengapa <div tabIndex={-1} /> // Just like node.tabIndex DOM API <div className="Button" /> // Just like node.className DOM API <input readOnly={true} /> // Just like node.readOnly DOM API_1 memiliki huruf besar “W”
React akan secara otomatis menambahkan akhiran "px" ke properti gaya inline numerik tertentu. Jika Anda ingin menggunakan satuan selain “px”, tentukan nilainya sebagai string dengan satuan yang diinginkan. Sebagai contoh
// Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>
Tidak semua properti gaya diubah menjadi string piksel. Yang tertentu tetap tanpa unit (misalnya <div tabIndex={-1} /> // Just like node.tabIndex DOM API <div className="Button" /> // Just like node.className DOM API <input readOnly={true} /> // Just like node.readOnly DOM API2, <div tabIndex={-1} /> // Just like node.tabIndex DOM API <div className="Button" /> // Just like node.className DOM API <input readOnly={true} /> // Just like node.readOnly DOM API3, <div tabIndex={-1} /> // Just like node.tabIndex DOM API <div className="Button" /> // Just like node.className DOM API <input readOnly={true} /> // Just like node.readOnly DOM API4). Daftar lengkap properti tanpa unit dapat dilihat
suppressContentEditableWarning
Biasanya, ada peringatan ketika elemen dengan anak-anak juga ditandai sebagai <div tabIndex={-1} /> // Just like node.tabIndex DOM API <div className="Button" /> // Just like node.className DOM API <input readOnly={true} /> // Just like node.readOnly DOM API5, karena tidak akan berfungsi. Atribut ini menekan peringatan itu. Jangan gunakan ini kecuali Anda sedang membangun perpustakaan seperti Draft. js yang mengelola <div tabIndex={-1} /> // Just like node.tabIndex DOM API <div className="Button" /> // Just like node.className DOM API <input readOnly={true} /> // Just like node.readOnly DOM API_5 secara manual
suppressHydrationWarning
Jika Anda menggunakan rendering React sisi server, biasanya ada peringatan saat server dan klien merender konten yang berbeda. Namun, dalam beberapa kasus yang jarang terjadi, sangat sulit atau tidak mungkin untuk menjamin kecocokan yang tepat. Misalnya, stempel waktu diharapkan berbeda di server dan di klien
Jika Anda menyetel <div tabIndex={-1} /> // Just like node.tabIndex DOM API <div className="Button" /> // Just like node.className DOM API <input readOnly={true} /> // Just like node.readOnly DOM API7 ke <div tabIndex={-1} /> // Just like node.tabIndex DOM API <div className="Button" /> // Just like node.className DOM API <input readOnly={true} /> // Just like node.readOnly DOM API8, React tidak akan memperingatkan Anda tentang ketidakcocokan atribut dan konten elemen tersebut. Ini hanya bekerja sedalam satu tingkat, dan dimaksudkan untuk digunakan sebagai pintu keluar darurat. Jangan terlalu sering menggunakannya. Anda dapat membaca lebih lanjut tentang hidrasi di
nilai
Atribut // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>_1 didukung oleh komponen const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }4, // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div>2 dan accept acceptCharset accessKey action allowFullScreen alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls controlsList coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap3. Anda dapat menggunakannya untuk mengatur nilai komponen. Ini berguna untuk membangun komponen yang dikendalikan. accept acceptCharset accessKey action allowFullScreen alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls controlsList coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap4 adalah padanan yang tidak terkontrol, yang menetapkan nilai komponen saat pertama kali dipasang
Semua Atribut HTML yang Didukung
Sejak React 16, atribut DOM standar atau kustom apa pun didukung sepenuhnya
React selalu menyediakan API yang berpusat pada JavaScript ke DOM. Karena komponen React sering menggunakan prop terkait kustom dan DOM, React menggunakan konvensi accept acceptCharset accessKey action allowFullScreen alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls controlsList coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap5 seperti halnya API DOM
<div tabIndex={-1} /> // Just like node.tabIndex DOM API <div className="Button" /> // Just like node.className DOM API <input readOnly={true} /> // Just like node.readOnly DOM API
Alat peraga ini bekerja mirip dengan atribut HTML yang sesuai, dengan pengecualian kasus khusus yang didokumentasikan di atas