Props di ReactJS

La principale differenza tra stato e propspropsè immutabile. Ecco perché il componente contenitore dovrebbe definire uno stato che può essere aggiornato e modificato, mentre i componenti figli dovrebbero utilizzare solo i props per passare dati dallo stato.

Usare 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="Header proveniente da props..." contentProp="Contenuto
　　　from props...">, document.getElementById('app'));
export default App;

Questo produce il seguente risultato.

Props predefinite

Puoi anche impostare direttamente i valori predefiniti delle proprietà nel costruttore del componente, anziché aggiungerli all'elemento 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: "Header proveniente da props...",
　　　contentProp: "Contenuto proveniente da 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'));

l'output è lo stesso di prima.

stato e props

Esempio seguente mostra comestatoNell'applicazione, li combiniamo e supportiamo. Nella componente genitore impostiamo lo stato, quindi usiamopropse lo stiamo passando alla gerarchia dei componenti. InrenderAll'interno della funzione, stiamo impostandoheaderPropecontentPropNella componente figlia.

App.jsx

import React from 'react';
class App extends React.Component {}}
　　　constructor(props) {
　　　　　　super(props);
　　　　　　this.state = {
　　　　　　　　　header: "Intestazione da props...",
　　　　　　　　　content: "Contenuto da 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'));

Il risultato sarà lo stesso degli ultimi due esempi, con l'unica differenza che la nostra fonte di dati, che originariamente proveniva dastatoQuando vogliamo aggiornarlo, dobbiamo solo aggiornare lo stato, e tutti i componenti figli saranno aggiornati.