ReactJS Props

Der Hauptunterschied zwischen Status und Propspropssind unveränderlich. Deshalb sollten die Container-Komponenten den Status definieren, der aktualisiert und geändert werden kann, und die Kind-Komponenten sollten nur Props von dem Status verwenden, um Daten zu übertragen.

Props verwenden

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App headerProp="Header von Props..." contentProp="Content
　　　von Props..."/>,　document.getElementById('app'));
export　default　App;

Das ergibt folgendes Ergebnis.

Standard-Props

Sie können auch die Standardwerte direkt im Konstruktor des Komponenten setzen, anstatt sie dem reactDom.render ()-Element hinzuzufügen.

App.jsx

import　React　from　'react';
class App extends React.Component { render() {
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
App.defaultProps = {
　　　headerProp: "Header von Props...",
　　　contentProp: "Content von Props..."
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/>,　document.getElementById('app'));

wie früher ausgegeben wird.

Status und Props

Der folgende Beispiel zeigt, wiestateIm Anwendungsbereich werden wir den Status konfiguriert und dann verwendenpropsund übergeben es an den Komponentenbaum. InrenderInnerhalb der Funktion konfigurieren wirheaderPropundcontentPropIm Kind-Component verwendet.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{
　　　constructor(props)　{
　　　　　　super(props);
　　　　　　this.state　=　{
　　　　　　　　　header:　"Header　from　props...",
　　　　　　　　　content:　"Content　from　props..."
　　　　　　}
　　　}
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header　headerProp　=　{this.state.header}/>
　　　　　　　　　　　　<Content　contentProp　=　{this.state.content}/>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Content　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/>,　document.getElementById('app'));

Das Ergebnis wird erneut mit den beiden ersten Beispielen übereinstimmen, der einzige Unterschied ist unser Datenquelle, die ursprünglich vonstateWenn wir es aktualisieren möchten, müssen wir nur den Status aktualisieren, und alle Unterkomponenten werden aktualisiert.