Reaguj rekwizyty
Props to argumenty przekazywane do komponentów React.
Rekwizyty są przekazywane do komponentów za pośrednictwem atrybutów HTML.
props oznacza właściwości.
Reaguj rekwizyty
React Props są jak argumenty funkcji w JavaScript i atrybuty w HTML.
Aby wysłać props do komponentu, użyj tej samej składni, co atrybuty HTML:
Przykład
Dodaj atrybut „marka” do elementu Samochód:
const myelement = <Car brand="Ford" />;Komponent otrzymuje argument jako propsobiekt:
Przykład
Użyj atrybutu marki w komponencie:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Zostać certyfikowanym!
95 $ ZAPISZ
Przekaż dane
Rekwizyty to także sposób, w jaki przekazujesz dane z jednego komponentu do drugiego, jako parametry.
Przykład
Wyślij właściwość „marka” z komponentu Garaż do komponentu Samochód:
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'));
Jeśli masz zmienną do wysłania, a nie ciąg znaków, jak w powyższym przykładzie, po prostu umieść nazwę zmiennej w nawiasach klamrowych:
Przykład
Utwórz zmienną o nazwie carNamei wyślij ją do
Carkomponentu:
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'));
Lub gdyby był to przedmiot:
Przykład
Utwórz obiekt o nazwie carInfoi wyślij go do
Carkomponentu:
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'));
Uwaga: React Props są tylko do odczytu! Otrzymasz błąd, jeśli spróbujesz zmienić ich wartość.