Le proprietà in React

// File: src/App.jsx

import "./App.css";
import Message from "./components/Message";

export default function App() {
  return (
    <div className="App">
      <Message />
    </div>
  );
}

Riprendendo l’esempio del capitolo precedente – che vediamo sopra – notiamo che la pagina, grazie a quel codice, conterrà un paragrafo che dice “Look, a message!”. Non abbiamo, però, modo di controllare e modificare il contenuto del messaggio dal componente App; possiamo farlo dall’interno del componente Message. Quindi, modifichiamo Message così che possa ricevere delle proprietà:

// File: src/components/Message.jsx

export default function Message(props) {
  return <p className="Message">{props.message}</p>;
}
…e passiamo message come proprietà di Message tramite App:
// File: src/App.jsx

import "./App.css";
import Message from "./components/Message";

export default function App() {
  return (
    <div className="App">
      <Message message="Look, a message!" />
    </div>
  );
}

Notiamo come la sintassi è incredibilmente simile a quella di un elemento HTML:

<ComponenteReact nomeProp  = {valoreProp}>
<elemento-html   attributo = "valore"    ></elemento-html>

Possiamo, quindi, creare dei parallelismi tra componenti React ed elementi HTML:

• I componenti React sono delle funzioni che corrispondono agli elementi HTML.
• Il singolo argomento che un componente si aspetta è un oggetto e rappresenta le proprietà di quel componente.
• I nomi delle proprietà dell’oggetto-proprietà corrispondono agli attributi HTML.
• Di conseguenza, i valori dell’oggetto-proprietà sono i valori degli attributi HTML.

Come nei casi precedenti, possiamo sfruttare JSX per salvare il messaggio in una costante e iniettarlo nel valore di ritorno di App:

// File: src/App.jsx

import "./App.css";
import Message from "./components/Message";

export default function App() {
  const message = "Look, a message!";

  return (
    <div className="App">
      <Message message={message} />
    </div>
  );
}

Destrutturazione delle props in React JavaScript

Per aiutare VS Code (o qualsiasi editor stiamo usando) a capire i nomi delle proprietà che il nostro componente si aspetta, possiamo sfruttare la destrutturazione degli oggetti in JavaScript:

// Esempio di destrutturazione di un oggetto
const someObject = {
  one: 1,
  two: 2,
  three: 3,
};

const { one, two three } = someObject;
// File: src/components/Message.jsx

export default function Message({ message }) {
  return <p className="Message">{message}</p>;
}

Attenzione: questo metodo si adatta solo a React JavaScript perché, non essendo un linguaggio tipizzato, destrutturare le prop aiuta l’autocompletamento degli editor. In TypeScript, per esempio, potendo creare un’interfaccia per specificare il tipo di proprietà che ci aspettiamo, ha più senso mantenere il nome props ed esprimere le props come, ad esempio, props.message, per distinguerle da eventuali valori dichiarati all’interno del componente.

Le props come tecnica di condivisione dello stato tra componenti

Come abbiamo accennato in precedenza, React viene utilizzato per descrivere interfacce utente complesse. L’utilizzo delle props è il primo strumento che possiamo utilizzare verso questo scopo, trattandosi di un modo per inviare informazioni dai componenti genitori ai componenti figli.

In questo momento stiamo facendo esempi molto semplici, in cui un’informazione hardcoded (i.e.: il cui valore è scritto direttamente nel codice) è passata a un unico componente figlio. Possiamo, però, immaginare situazioni teoricamente molto più complesse, in cui il cambiamento del valore di un’informazione può scatenare una serie di cambiamenti, che si propagano attraverso un albero di componenti, permettendo all’interfaccia grafica di riflettere visivamente il nuovo valore dell’informazione.

Man mano che vedremo metodi e tecniche per rappresentare e comunicare le informazioni tra componenti, cerchiamo di tenere a mente questa filosofia: stiamo cercando di descrivere la realtà, convertendo le informazioni concettuali in informazioni visive e reagendo ai cambiamenti.

La proprietà children in React

React fornisce tre proprietà sempre valide che sono ref, key e children. Vedremo le prime due più avanti, mentre children rappresenta, come possiamo immaginare, i figli di un componente.

Immaginiamo di voler ricreare il rettangolo con i bordi arrotondati che avevamo nella nostra applicazione di esempio prima di isolare il nostro componente Message. Questa volta non vogliamo metterci dentro solo messaggi, ma vogliamo essere in grado di poterci inserire quello che ci pare.

All’interno della cartella components, possiamo creare un nuovo componente, che chiameremo Panel. Creiamo anche un file CSS associato, per poter dare l’aspetto che vogliamo al nuovo componente.

// File: src/components/Panel.jsx

import "./Panel.css";

export default function Panel({ children }) {
  return <div className="Panel">{children}</div>;
}
/* File: src/components/Panel.css */

.Panel {
  background-color: #ddd;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5em;
  max-width: 45em;
  padding: 1em;
  width: 90vw;
}

A questo punto, possiamo svuotare App.css, perché abbiamo “trasferito” le proprietà del paragrafo al nostro nuovo componente Panel.

Successivamente, possiamo utilizzare il nuovo componente in App.jsx:

// File: src/App.jsx

import "./App.css";
import Message from "./components/Message";
import Panel from "./components/Panel";

export default function App() {
  const message = "Look, a message!";

  return (
    <div className="App">
      <Panel>
        <Message message={message} />
      </Panel>
    </div>
  );
}

Notiamo come, in Panel.jsx, abbiamo utilizzato children come se fosse una proprietà qualsiasi, per esempio la proprietà message nel componente Message. All’interno di App.jsx, invece, abbiamo semplicemente inserito il componente Message come figlio di Panel.

Quando usare children

L’utilizzo di children è un’ottima soluzione per pop-up, modali e simili. Attenzione, però, alle situazioni di lavoro di gruppo, in cui altre persone potrebbero non sapere quali componenti possono o non possono essere usati come figli di altri componenti.

Se il tuo componente non è fatto per accettare qualsiasi tipo di contenuto (e normalmente nessun componente lo è), assicurati di inserire dei controlli per fare in modo che il componente si assicuri di ricevere dei figli che può gestire.

Immaginiamo che il nostro componente Panel possa gestire solo componenti Message come figli. React ci fornisce uno strumento per controllare i figli uno per uno, che possiamo mischiare con il fatto che le funzioni JavaScript portano l’informazione del loro nome, in questo modo:

// File: src/components/Panel.jsx

import { Children } from "react";
import "./Panel.css";

export default function Panel({ children }) {
  Children.forEach(children, (child) => {
    if (child.type.name !== "Message") {
      throw new Error("Panel can only accept Message components as children");
    }
  });

  return <div className="Panel">{children}</div>;
}

Con questo controllo, se qualcuno dovesse cercare di inserire componenti che non siano Message in un componente Panel, riceverebbe subito un errore durante lo sviluppo. Come vedremo ripetutamente durante il nostro viaggio, una regola aurea della programmazione informatica è: facciamo in modo che il nostro codice renda più semplice usarlo nel modo giusto, di quanto lo sia usarlo nel modo sbagliato. Questa regola ci aiuta a impostare un contesto che porta i nostri colleghi e noi stessi a modificare le funzionalità esistenti, oppure aggiungerne di nuove, senza creare conflitti con le funzionalità passate.