Jenis runtime memeriksa props React dan objek serupa.
Anda dapat menggunakan tipe prop untuk mendokumentasikan tipe properti yang diinginkan yang diteruskan ke komponen. React (dan kemungkinan perpustakaan lainnya—lihat referensi checkPropTypes() di bawah) akan memeriksa props yang diteruskan ke komponen Anda terhadap definisi tersebut, dan memperingatkan dalam pengembangan jika tidak cocok.
npm install --save prop-types import PropTypes from 'prop-types' ; // ES6
var PropTypes = require ( 'prop-types' ) ; // ES5 with npm Jika Anda memilih untuk mengecualikan prop-types dari aplikasi Anda dan menggunakannya secara global melalui window.PropTypes , paket prop-types menyediakan distribusi file tunggal, yang dihosting di CDN berikut:
<!-- development version -->
< script src =" https://unpkg.com/[email protected]/prop-types.js " > </ script >
<!-- production version -->
< script src =" https://unpkg.com/[email protected]/prop-types.min.js " > </ script > <!-- development version -->
< script src =" https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js " > </ script >
<!-- production version -->
< script src =" https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js " > </ script > Untuk memuat versi prop-types tertentu, ganti 15.6.0 dengan nomor versi.
PropTypes awalnya diekspos sebagai bagian dari modul inti React, dan umumnya digunakan dengan komponen React. Berikut adalah contoh penggunaan PropTypes dengan komponen React, yang juga mendokumentasikan berbagai validator yang disediakan:
import React from 'react' ;
import PropTypes from 'prop-types' ;
class MyComponent extends React . Component {
render ( ) {
// ... do things with the props
}
}
MyComponent . propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray : PropTypes . array ,
optionalBigInt : PropTypes . bigint ,
optionalBool : PropTypes . bool ,
optionalFunc : PropTypes . func ,
optionalNumber : PropTypes . number ,
optionalObject : PropTypes . object ,
optionalString : PropTypes . string ,
optionalSymbol : PropTypes . symbol ,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
// see https://reactjs.org/docs/rendering-elements.html for more info
optionalNode : PropTypes . node ,
// A React element (ie. <MyComponent />).
optionalElement : PropTypes . element ,
// A React element type (eg. MyComponent).
// a function, string, or "element-like" object (eg. React.Fragment, Suspense, etc.)
// see https://github.com/facebook/react/blob/HEAD/packages/shared/isValidElementType.js
optionalElementType : PropTypes . elementType ,
// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage : PropTypes . instanceOf ( Message ) ,
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum : PropTypes . oneOf ( [ 'News' , 'Photos' ] ) ,
// An object that could be one of many types
optionalUnion : PropTypes . oneOfType ( [
PropTypes . string ,
PropTypes . number ,
PropTypes . instanceOf ( Message )
] ) ,
// An array of a certain type
optionalArrayOf : PropTypes . arrayOf ( PropTypes . number ) ,
// An object with property values of a certain type
optionalObjectOf : PropTypes . objectOf ( PropTypes . number ) ,
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
// An object taking on a particular shape
optionalObjectWithShape : PropTypes . shape ( {
optionalProperty : PropTypes . string ,
requiredProperty : PropTypes . number . isRequired
} ) ,
// An object with warnings on extra properties
optionalObjectWithStrictShape : PropTypes . exact ( {
optionalProperty : PropTypes . string ,
requiredProperty : PropTypes . number . isRequired
} ) ,
requiredFunc : PropTypes . func . isRequired ,
// A value of any data type
requiredAny : PropTypes . any . isRequired ,
// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp : function ( props , propName , componentName ) {
if ( ! / matchme / . test ( props [ propName ] ) ) {
return new Error (
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
) ;
}
} ,
// You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
customArrayProp : PropTypes . arrayOf ( function ( propValue , key , componentName , location , propFullName ) {
if ( ! / matchme / . test ( propValue [ key ] ) ) {
return new Error (
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
) ;
}
} )
} ;Lihat dokumentasi React untuk informasi lebih lanjut.
Lihat Migrasi dari React.PropTypes untuk detail tentang cara bermigrasi ke prop-types dari React.PropTypes .
Perhatikan bahwa postingan blog ini menyebutkan skrip codemod yang melakukan konversi secara otomatis .
Ada juga catatan penting di bawah ini.
Untuk aplikasi, kami menyarankan untuk menempatkannya dalam dependencies dengan rentang tanda sisipan. Misalnya:
"dependencies" : {
"prop-types" : "^15.5.7"
} Untuk perpustakaan, kami juga menyarankan untuk membiarkannya dalam dependencies :
"dependencies" : {
"prop-types" : "^15.5.7"
} ,
"peerDependencies" : {
"react" : "^15.5.0"
}Catatan: ada masalah umum pada versi sebelum 15.5.7 jadi kami menyarankan untuk menggunakannya sebagai versi minimal.
Pastikan rentang versi menggunakan tanda sisipan ( ^ ) sehingga cukup luas bagi npm untuk menghapus duplikat paket secara efisien.
Untuk bundel UMD komponen Anda, pastikan Anda tidak menyertakan PropTypes dalam build. Biasanya hal ini dilakukan dengan menandainya sebagai eksternal (spesifiknya bergantung pada bundler Anda), seperti yang Anda lakukan dengan React.
Paket ini kompatibel dengan React 0.14.9 . Dibandingkan dengan 0.14.8 (yang dirilis pada bulan Maret 2016), tidak ada perubahan lain di 0.14.9, jadi ini merupakan peningkatan yang mudah.
# ATTENTION: Only run this if you still use React 0.14!
npm install --save react@^0.14.9 react-dom@^0.14.9Paket ini kompatibel dengan React 15.3.0 dan lebih tinggi.
npm install --save react@^15.3.0 react-dom@^15.3.0
Ini mengeluarkan peringatan dengan pesan di bawah ini meskipun pengembang tidak melakukan kesalahan apa pun. Sayangnya tidak ada solusi untuk hal ini selain memperbarui React ke 15.3.0 atau lebih tinggi, atau 0.14.9 jika Anda menggunakan React 0.14.
React.PropTypes : Jangan Panggil Fungsi Validator Pertama-tama, versi React mana yang Anda gunakan ? Anda mungkin melihat pesan ini karena pustaka komponen telah diperbarui untuk menggunakan paket prop-types , namun versi React Anda tidak kompatibel dengannya. Lihat bagian di atas untuk lebih jelasnya.
Apakah Anda menggunakan React 0.14.9 atau versi yang lebih tinggi dari React 15.3.0? Baca terus.
Saat Anda memigrasikan komponen untuk menggunakan prop-types mandiri, semua fungsi validator akan mulai menimbulkan kesalahan jika Anda memanggilnya secara langsung . Hal ini memastikan tidak ada orang yang bergantung padanya dalam kode produksi, dan implementasinya dapat dihapus dengan aman untuk mengoptimalkan ukuran paket.
Kode seperti ini masih bagus:
MyComponent . propTypes = {
myProp : PropTypes . bool
} ; Namun, kode seperti ini tidak akan berfungsi dengan paket prop-types :
// Will not work with `prop-types` package!
var errorOrNull = PropTypes . bool ( 42 , 'myProp' , 'MyComponent' , 'prop' ) ;Ini akan menimbulkan kesalahan:
Calling PropTypes validators directly is not supported by the `prop-types` package.
Use PropTypes.checkPropTypes() to call them.
(Jika Anda melihat peringatan dan bukan kesalahan pada pesan ini, harap periksa bagian di atas tentang kompatibilitas.)
Ini adalah perilaku baru, dan Anda hanya akan menemukannya saat bermigrasi dari React.PropTypes ke paket prop-types . Untuk sebagian besar komponen, hal ini tidak menjadi masalah, dan jika Anda tidak melihat peringatan ini di komponen, kode Anda aman untuk dimigrasi. Ini bukan perubahan yang dapat menyebabkan gangguan pada React karena Anda hanya ikut serta dalam perubahan ini untuk sebuah komponen dengan secara eksplisit mengubah impor Anda untuk menggunakan prop-types . Jika Anda memerlukan perilaku lama untuk sementara, Anda dapat tetap menggunakan React.PropTypes hingga React 16.
Jika Anda benar-benar perlu memicu validasi secara manual , hubungi PropTypes.checkPropTypes() . Berbeda dengan validator itu sendiri, fungsi ini aman untuk dipanggil dalam produksi, karena akan digantikan oleh fungsi kosong:
// Works with standalone PropTypes
PropTypes . checkPropTypes ( MyComponent . propTypes , props , 'prop' , 'MyComponent' ) ;Lihat di bawah untuk informasi lebih lanjut.
Jika Anda ingin menggunakan validasi dalam produksi , Anda dapat memilih untuk menggunakan versi pengembangan dengan mengimpor/membutuhkan prop-types/prop-types daripada prop-types .
Anda mungkin juga melihat kesalahan ini jika memanggil validator PropTypes dari validator PropTypes kustom Anda sendiri. Dalam hal ini, perbaikannya adalah memastikan bahwa Anda meneruskan semua argumen ke fungsi dalam. Ada penjelasan lebih mendalam tentang cara memperbaikinya di halaman ini. Alternatifnya, Anda dapat tetap menggunakan React.PropTypes untuk sementara hingga React 16, karena dalam kasus ini ia hanya akan memberikan peringatan.
Jika Anda menggunakan bundler seperti Browserify atau Webpack, jangan lupa untuk mengikuti petunjuk berikut untuk menggabungkan aplikasi Anda dengan benar dalam mode pengembangan atau produksi. Jika tidak, Anda akan mengirimkan kode yang tidak perlu ke pengguna Anda.
React akan secara otomatis memeriksa propTypes yang Anda setel pada komponen, tetapi jika Anda menggunakan PropTypes tanpa React maka Anda mungkin ingin memanggil PropTypes.checkPropTypes secara manual, seperti:
const myPropTypes = {
name : PropTypes . string ,
age : PropTypes . number ,
// ... define your prop validations
} ;
const props = {
name : 'hello' , // is valid
age : 'world' , // not valid
} ;
// Let's say your component is called 'MyComponent'
// Works with standalone PropTypes
PropTypes . checkPropTypes ( myPropTypes , props , 'prop' , 'MyComponent' ) ;
// This will warn as follows:
// Warning: Failed prop type: Invalid prop `age` of type `string` supplied to
// `MyComponent`, expected `number`. PropTypes.checkPropTypes(...) hanya console.error untuk pesan yang diberikan satu kali. Untuk menyetel ulang cache peringatan kesalahan dalam pengujian, panggil PropTypes.resetWarningCache()
tipe prop berlisensi MIT.
