Alat Peraga Bereaksi
Props adalah argumen yang diteruskan ke komponen React.
Alat peraga diteruskan ke komponen melalui atribut HTML.
props singkatan dari properti.
Alat Peraga Bereaksi
React Props seperti argumen fungsi dalam JavaScript dan atribut dalam HTML.
Untuk mengirim alat peraga ke dalam komponen, gunakan sintaks yang sama dengan atribut HTML:
Contoh
Tambahkan atribut "brand" ke elemen Mobil:
const myelement = <Car brand="Ford" />;Komponen menerima argumen sebagai propsobjek:
Contoh
Gunakan atribut merek dalam komponen:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Dapatkan Sertifikasi!
$95 DAFTAR
Lulus Data
Alat peraga juga merupakan cara Anda meneruskan data dari satu komponen ke komponen lainnya, sebagai parameter.
Contoh
Kirim properti "merek" dari komponen Garasi ke komponen Mobil:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Jika Anda memiliki variabel untuk dikirim, dan bukan string seperti pada contoh di atas, Anda cukup memasukkan nama variabel di dalam kurung kurawal:
Contoh
Buat variabel bernama carNamedan kirimkan ke
Carkomponen:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
const carName = "Ford";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Atau jika itu adalah objek:
Contoh
Buat objek bernama carInfodan kirimkan ke
Carkomponen:
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
}
function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Catatan: React Props hanya bisa dibaca! Anda akan mendapatkan kesalahan jika Anda mencoba mengubah nilainya.