React Props
Podpěry jsou argumenty předávané do komponent React.
Rekvizity jsou komponentám předávány prostřednictvím atributů HTML.
propsznamená vlastnosti.
React Props
React Props jsou jako argumenty funkcí v JavaScriptu a atributy v HTML.
Chcete-li odeslat rekvizity do komponenty, použijte stejnou syntaxi jako atributy HTML:
Příklad
Přidejte atribut „značka“ k prvku Car:
const myelement = <Car brand="Ford" />;Komponenta obdrží argument jako propsobjekt:
Příklad
Použijte atribut brand v komponentě:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
Předat data
Podpěry jsou také způsob, jakým předáváte data z jedné komponenty do druhé jako parametry.
Příklad
Odešlete vlastnost "značka" z komponenty Garáž do komponenty Auto:
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'));
Pokud máte k odeslání proměnnou, a ne řetězec jako ve výše uvedeném příkladu, stačí zadat název proměnné do složených závorek:
Příklad
Vytvořte proměnnou s názvem carNamea odešlete ji do
Carkomponenty:
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'));
Nebo kdyby to byl předmět:
Příklad
Vytvořte objekt s názvem carInfoa odešlete jej do
Carkomponenty:
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'));
Poznámka: React Props jsou pouze pro čtení! Pokud se pokusíte změnit jejich hodnotu, zobrazí se chyba.