Props ReactJS

la principale différence entre l'état et les propspropsest immuable. C'est pourquoi le composant conteneur doit définir un état qui peut être mis à jour et modifié, tandis que les composants enfants doivent utiliser les props pour transmettre des données à partir de l'état.

l'utilisation des props

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="En-tête provenant des props..." contentProp="Contenu
　　　provenant des props..."/,　document.getElementById('app'));
export　default　App;

ce qui produit le résultat suivant.

Props par défaut

Vous pouvez également configurer directement les valeurs par défaut des props dans le constructeur du composant, plutôt que de les ajouter à l'élément reactDom.render().

App.jsx

import　React　from　'react';
class App extends React.Component {
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
App.defaultProps = {
　　　headerProp: "En-tête provenant des props...",
　　　contentProp: "Contenu provenant des 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'));

le résultat est le même que précédemment.

l'état et les props

l'exemple suivant montre commentétatdans l'application, nous les fusionnons et soutenons. Nous configurons l'état dans le composant parent, puis utilisonspropset le transmettons à l'arbre de composants. Dansrenderdans la fonction, nous configuronsheaderPropetcontentPropdans le composant enfant.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{
　　　constructor(props)　{
　　　　　　super(props);
　　　　　　this.state　=　{
　　　　　　　　　header:　"En-tête provenant des props...",
　　　　　　　　　content:　"Contenu provenant des 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'));

Les résultats seront à nouveau identiques aux deux premiers exemples, la seule différence étant notre source de données, qui provient initialement deétatLorsque nous voulons le mettre à jour, nous devons seulement mettre à jour l'état, tous les composants enfants seront mis à jour.