Reagieren Sie Requisiten
Props sind Argumente, die an React-Komponenten übergeben werden.
Props werden über HTML-Attribute an Komponenten übergeben.
props steht für Eigenschaften.
Reagieren Sie Requisiten
React Props sind wie Funktionsargumente in JavaScript und Attribute in HTML.
Um Requisiten in eine Komponente zu senden, verwenden Sie die gleiche Syntax wie bei HTML-Attributen:
Beispiel
Fügen Sie dem Auto-Element ein „Marken“-Attribut hinzu:
const myelement = <Car brand="Ford" />;Die Komponente erhält das Argument als propsObjekt:
Beispiel
Verwenden Sie das Markenattribut in der Komponente:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Zertifiziert werden!
$ 95 REGISTRIEREN
Daten übergeben
Mit Requisiten übergeben Sie auch Daten als Parameter von einer Komponente an eine andere.
Beispiel
Senden Sie die Eigenschaft "Marke" von der Garagenkomponente an die Autokomponente:
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'));
Wenn Sie eine Variable zu senden haben und keine Zeichenfolge wie im obigen Beispiel, setzen Sie den Variablennamen einfach in geschweifte Klammern:
Beispiel
Erstellen Sie eine Variable mit dem Namen carNameund senden Sie sie an die
CarKomponente:
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'));
Oder wenn es ein Objekt war:
Beispiel
Erstellen Sie ein Objekt mit dem Namen carInfound senden Sie es an die
CarKomponente:
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'));
Hinweis: React Props sind schreibgeschützt! Sie erhalten eine Fehlermeldung, wenn Sie versuchen, ihren Wert zu ändern.