Padroneggiare oggetti di scena e PropType in reazione

Oggetti di scena e PropType ti confondono? Non sei solo. Ti guiderò attraverso tutto ciò che riguarda oggetti di scena e PropType. Possono semplificarti notevolmente la vita durante lo sviluppo di app React. Questo tutorial ti introdurrà ai dettagli sugli oggetti di scena, il passaggio e l'accesso agli oggetti di scena e il passaggio di informazioni a qualsiasi componente utilizzando gli oggetti di scena.

La creazione di applicazioni React implica la scomposizione dell'interfaccia utente in più componenti, il che implica che dovremo passare i dati da un componente all'altro. Gli oggetti di scena sono un meccanismo importante per il passaggio di informazioni tra i componenti di React e li esamineremo in dettaglio. Questo articolo sarebbe incompleto senza esaminare PropTypes, perché assicurano che i componenti utilizzino il tipo di dati corretto e trasmettano i dati corretti.

È sempre una buona pratica convalidare i dati che otteniamo come oggetti di scena utilizzando PropTypes. Imparerai anche come integrare PropTypes in React, controllare i tipi con PropTypes e usare defaultProps. Alla fine di questo tutorial, capirai come utilizzare oggetti di scena e PropType in modo efficace. È importante che tu abbia già una conoscenza di base di come funziona React.

Capire gli oggetti di scena

React ci consente di passare informazioni ai componenti usando cose chiamate props (abbreviazione di proprietà). Poiché React comprende diversi componenti, gli oggetti di scena consentono di condividere gli stessi dati tra i componenti che ne hanno bisogno. Fa uso di un flusso di dati unidirezionale (componenti da genitore a figlio). Tuttavia, con una funzione di callback, è possibile passare gli oggetti di scena da un figlio a un componente genitore.

Questi dati possono venire in diverse forme: numeri, stringhe, array, funzioni, oggetti, ecc. Possiamo passare props a qualsiasi componente, proprio come possiamo dichiarare attributi in qualsiasi tag HTML. Dai un'occhiata al codice qui sotto:

 <PostList posts={postsList} />

In questo frammento, stiamo passando un prop chiamato posts a un componente chiamato PostList . Questo prop ha un valore di {postsList} . Analizziamo come accedere e passare i dati.

Passaggio e accesso agli oggetti di scena

Per rendere interessante questo tutorial, creiamo un'applicazione che mostra un elenco di nomi e post degli utenti. La demo dell'app è mostrata di seguito:

L'app comprende raccolte di componenti: un componente App , un componente PostList e un componente Post .

L'elenco dei post richiederà dati come il content e il name dell'utente. Possiamo costruire i dati in questo modo:

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

Dopo questo, abbiamo bisogno del componente App per estrarre i dati, Ecco la struttura di base di quel componente:

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

Qui, stiamo passando una serie di post come supporto alla PostList (che creeremo tra un po'). Il componente padre, PostList , accederà ai dati in postsList , che verranno passati come posts props al componente figlio ( Post ). Se ricorderai, la nostra app comprende tre componenti, che creeremo man mano che procediamo.

Creiamo la PostList :

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

Il componente PostList riceverà posts come prop. Quindi scorrerà il posts , this.props.posts , per restituire ogni articolo pubblicato come componente Post (che modelleremo in seguito). Inoltre, nota l'uso della key nello snippet sopra. Per i nuovi utenti di React, una chiave è un identificatore univoco assegnato a ciascun elemento nel nostro elenco, che ci consente di distinguere tra gli elementi. In questo caso, la chiave è l' id di ogni post. Non c'è alcuna possibilità che due elementi abbiano lo stesso id , quindi è un buon pezzo di dati da utilizzare per questo scopo.

Nel frattempo, le proprietà rimanenti vengono passate come prop al componente Post ( <Post {...post} /> ).

Quindi, creiamo il componente Post e utilizziamo gli oggetti di scena in esso contenuti:

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

Stiamo costruendo il componente Post come componente funzionale, invece di definirlo come componente di classe come abbiamo fatto per il componente PostList . L'ho fatto per mostrarti come accedere agli oggetti di scena in un componente funzionale, rispetto a come li accediamo in un componente di classe con this.props . Poiché questo è un componente funzionale, possiamo accedere ai valori usando props .

Ora abbiamo imparato come passare e accedere agli oggetti di scena e anche come passare informazioni da un componente all'altro. Consideriamo ora come funzionano gli oggetti di scena con le funzioni.

Passare le funzioni tramite gli oggetti di scena

Nella sezione precedente, abbiamo passato un array di dati come prop da un componente all'altro. Ma cosa succede se invece stiamo lavorando con le funzioni? React ci consente di passare funzioni tra i componenti. Questo è utile quando vogliamo attivare un cambio di stato in un componente padre dal suo componente figlio. Gli oggetti di scena dovrebbero essere immutabili; non dovresti tentare di cambiare il valore di un oggetto di scena. Devi farlo nel componente che lo trasmette, che è il componente padre.

Creiamo una semplice app demo che ascolta un evento click e cambia lo stato dell'app. Per modificare lo stato dell'app in un componente diverso, dobbiamo trasmettere la nostra funzione al componente il cui stato deve cambiare. In questo modo, avremo una funzione nel nostro componente figlio che è in grado di cambiare stato.

Suona un po' complesso? Ho creato una semplice applicazione React che cambia stato con il clic di un pulsante e fornisce un'informazione di benvenuto:

Nella demo sopra, abbiamo due componenti. Uno è il componente App , che è il componente padre che contiene lo stato dell'app e la funzione per impostare lo stato. Il ChildComponent sarà il figlio in questo scenario e il suo compito è rendere le informazioni di benvenuto quando lo stato cambia.

Analizziamolo in codice:

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

Si noti che abbiamo impostato il nostro stato su true e il metodo per modificare lo stato viene creato nel componente App . Nella funzione render() , passiamo lo stato dell'app, come prop isShow , al componente ChildComponent . Passiamo anche la funzione toggleShow() come prop chiamato clickMe .

Lo useremo nel ChildComponent che assomiglia a questo:

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

La cosa più importante sopra è che il componente App trasmetta una funzione come supporto al ChildComponent . La funzione clickMe() viene utilizzata per il gestore dei clic in ChildComponent , mentre ChildComponent non conosce la logica della funzione: attiva la funzione solo quando viene fatto clic sul pulsante. Lo stato viene modificato quando viene chiamata la funzione e, una volta che lo stato è cambiato, lo stato viene tramandato nuovamente come prop. Tutti i componenti interessati, come il bambino nel nostro caso, verranno renderizzati di nuovo.

Dobbiamo passare lo stato dell'app, isShow , come prop al ChildComponent , perché senza di esso, non possiamo scrivere la logica sopra per visualizzare il greeting quando lo stato viene aggiornato.

Ora che abbiamo esaminato le funzioni, passiamo alla convalida. È sempre una buona pratica convalidare i dati che otteniamo tramite gli oggetti di scena utilizzando PropTypes. Immergiamoci ora.

Cosa sono i PropType in reazione?

I PropType sono un meccanismo per garantire che i componenti utilizzino il tipo di dati corretto e trasmettano i dati corretti, che i componenti utilizzino il giusto tipo di prop e che i componenti riceventi ricevano il giusto tipo di prop.

Possiamo pensarlo come un cucciolo che viene consegnato in un negozio di animali. Il negozio di animali non vuole maiali, leoni, rane o gechi, vuole cuccioli. PropTypes garantisce che il tipo di dati corretto (cucciolo) venga consegnato al negozio di animali e non un altro tipo di animale.

Nella sezione precedente, abbiamo visto come passare informazioni a qualsiasi componente utilizzando gli oggetti di scena. Abbiamo passato gli oggetti di scena direttamente come attributo al componente e abbiamo anche passato gli oggetti di scena dall'esterno del componente e li abbiamo usati in quel componente. Ma non abbiamo verificato che tipo di valori otteniamo nel nostro componente tramite gli oggetti di scena o che tutto funzioni ancora.

Sta a noi decidere se convalidare i dati che otteniamo in un componente tramite gli oggetti di scena. Ma in un'applicazione complessa, è sempre buona norma convalidare quei dati.

Usando PropTypes

Per utilizzare PropTypes, dobbiamo aggiungere il pacchetto come dipendenza alla nostra applicazione tramite npm o Yarn, eseguendo il codice seguente nella riga di comando. Per npm:

 npm install --save prop-types

E per Filato:

 yarn add prop-types

Per utilizzare PropTypes, dobbiamo prima importare PropTypes dal pacchetto prop-types:

 import PropTypes from 'prop-types';

Usiamo ProTypes nella nostra app che elenca i post degli utenti. Ecco come lo useremo per il componente Post :

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

Qui, PropTypes.string e PropTypes.number sono validatori di prop che possono essere utilizzati per assicurarsi che i prop ricevuti siano del tipo corretto. Nel codice sopra, dichiariamo che id è un numero, mentre content e user devono essere stringhe.

Inoltre, i PropType sono utili per catturare i bug. E possiamo imporre il passaggio degli oggetti di scena usando isRequired :

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

I PropType hanno molti validatori. Ecco alcuni dei più comuni:

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

Sono disponibili più tipi, che puoi controllare nella documentazione di React].

Puntelli predefiniti

Se vogliamo passare alcune informazioni di default ai nostri componenti usando props, React ci permette di farlo con qualcosa chiamato defaultProps . Nei casi in cui i PropTypes sono facoltativi (ovvero, non utilizzano isRequired ), possiamo impostare defaultProps . Gli oggetti di scena predefiniti assicurano che gli oggetti di scena abbiano un valore, nel caso in cui nulla venga passato. Ecco un esempio:

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

Qui, defaultProps verrà utilizzato per garantire che this.props.name abbia un valore, nel caso in cui non sia specificato dal componente padre. Se nessun nome viene passato alla classe Profile , avrà la proprietà predefinita Stranger su cui ripiegare. Questo impedisce qualsiasi errore quando non viene passato alcun prop. Ti consiglio di usare sempre defaultProps per ogni PropType opzionale.

Conclusione

Spero che ti sia piaciuto lavorare con questo tutorial. Si spera che ti abbia mostrato quanto siano importanti prop e propType per la creazione di applicazioni React, perché senza di essi non saremmo in grado di passare i dati tra i componenti quando si verificano interazioni. Sono una parte fondamentale dell'architettura basata sui componenti e di gestione dello stato su cui è progettato React.

I PropType sono un bonus per garantire che i componenti utilizzino il tipo di dati corretto e trasmettano i dati corretti, che i componenti utilizzino il giusto tipo di prop e che i componenti riceventi ricevano il giusto tipo di prop.

Se hai domande, puoi lasciarle nella sezione commenti qui sotto e sarò felice di rispondere a tutte e risolvere qualsiasi problema con te.

Riferimenti

• "Pensare in reazione", React Docs
• "Elenco e chiavi", React Docs
• "Controllo del tipo con PropTypes", React Docs
• "Come passare oggetti di scena ai componenti in reazione", Robin Wieruch