Introduzione alle proprietà

  • 3 minuti

I componenti di React sono progettati per essere unità riutilizzabili. Per consentire il riutilizzo, è possibile passare i dati nei componenti tramite proprietà o props.

Gli oggetti props sono valori di sola lettura disponibili per una singola istanza di un componente. Si possono impostare a livello di codice o con la stessa sintassi usata per impostare attributi per elementi HTML. A differenza del normale codice HTML, gli oggetti props non si limitano a stringhe o a valori primitivi, ma possono essere oggetti o matrici complesse. props è disponibile come proprietà di this all'interno di un componente. props può contenere tutte le proprietà necessarie per il componente ed è in grado di archiviare oggetti o qualsiasi altro tipo di dati.

Scenario

Per rendere i componenti riutilizzabili, in genere si passano i dati da visualizzare come proprietà. Verrà creato un componente denominato RecipeTitle per visualizzare il titolo della ricetta, che verrà passata come proprietà.

Creare il componente

  1. Aprire la cartella starter in Visual Studio Code, come evidenziato nella panoramica.

  2. All'interno Visual Studio Code aprire src/RecipeTitle.jsx.

  3. Aggiungere il codice seguente dopo la riga // TODO: Create RecipeTitle component:

    // TODO: Create RecipeTitle component
function RecipeTitle(props) {
    return (
        <section>
            <h2>{ props.title }</h2>
        </section>
    )
};

export default RecipeTitle;

Esplorare il codice

RecipeTitle è simile a un componente di base di React, con due aggiornamenti principali.

Prima di tutto, accetta un parametro denominato props. Questo parametro conterrà automaticamente tutti gli attributi o le proprietà passate al componente quando viene usato.

In secondo luogo, è possibile usare i valori contenuti in props come per qualsiasi parametro normale. Si cercherà un valore denominato title, che viene visualizzato all'interno di un elemento h2.

Usare il componente

A questo punto, aggiornare il file App.jsx per usare il nuovo componente RecipeTitle con la proprietà title.

  1. Aprire App.jsx

  2. Aggiungere il codice seguente sotto la riga TODO: Add import for RecipeTitle per importare il componente RecipeTitle appena creato:

    // TODO: Add import for RecipeTitle
import RecipeTitle from './RecipeTitle'

  3. Aggiungere il codice seguente dopo la riga TODO: Add recipe object per creare un oggetto per la ricetta:

    // TODO: Add recipe object
const recipe = {
    title: 'Mashed potatoes',
    feedback: {
        rating: 4.8,
        reviews: 20
    },
    ingredients: [
        { name: '3 potatoes, cut into 1/2" pieces', prepared: false },
        { name: '4 Tbsp butter', prepared: false },
        { name: '1/8 cup heavy cream', prepared: false },
        { name: 'Salt', prepared: true },
        { name: 'Pepper', prepared: true },
    ],
};

    Nota

    Nel corso degli esercizi di questo modulo, si userà l'intero oggetto recipe. Per il momento, ci si concentrerà su title.

  4. Aggiungere il codice seguente dopo la riga TODO: Add RecipeTitle component:

    {/* TODO: Add RecipeTitle component */}
<RecipeTitle title={ recipe.title } />

Esplorare il codice

Per iniziare, creare un oggetto che rappresenti la ricetta da visualizzare e aggiungervi una proprietà title. Usare quindi il componente RecipeTitle nello stesso modo in cui si userebbe un elemento HTML o qualsiasi altro componente di React. La differenza principale è che l'attributo title deve essere impostato sul valore recipe.title. Usando le parentesi graffe ({ }), è possibile leggere in modo dinamico il valore.

Nota

Se il valore da usare per title è un valore letterale stringa, è possibile impostare la proprietà con la sintassi title='Recipe title.

Visualizzare la pagina

  1. Salvare tutti i file.
  2. Tornare nel browser e aggiornare la pagina. A questo punto nella pagina dovrebbe essere visualizzato il titolo Mashed Potatoes.