Learn React
Descrivere la UI

JavaScript in JSX con le Parentesi Graffe

JSX ti permette di scrivere codice HTML all’interno di un file JavaScript, mantenendo la logica di rendering e il contenuto nello stesso posto. A volte vorrai aggiungere un po’ di logica JavaScript o fare riferimento a una proprietà dinamica all’interno di quel markup. In questa situazione, puoi usare le parentesi graffe nel tuo JSX per aprire una finestra su JavaScript.

Imparerai

  • Come passare stringhe con virgolette
  • Come riferirti a una variabile JavaScript all’interno di JSX con le parentesi graffe
  • Come chiamare una funzione JavaScript all’interno di JSX con le parentesi graffe
  • Come passare oggetti JavaScript all’interno di JSX con le parentesi graffe

Passare stringhe con le virgolette

Quando vuoi passare un attributo stringa a JSX, mettilo tra virgolette singole o doppie:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

Qui, "https://i.imgur.com/7vQD0fPs.jpg" e "Gregorio Y. Zara" sono passati come stringhe.

E se vuoi specificare dinamicamente il src o il testo alt? Puoi usare un valore da JavaScript sostituendo " e " con { e }:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

Nota la differenza tra className="avatar", che specifica un nome di classe CSS "avatar" che rende l’immagine rotonda, e src={avatar} che legge il valore della variabile JavaScript chiamata avatar. Questo perché le parentesi graffe ti permettono di lavorare con JavaScript proprio lì nel tuo markup!

Usare le parentesi graffe: una finestra nel mondo JavaScript

JSX è un modo speciale di scrivere JavaScript. Ciò significa che è possibile utilizzare JavaScript al suo interno, con le parentesi graffe { }. L’esempio seguente dichiara prima un nome per lo scienziato, name, quindi lo incorpora con le parentesi graffe all’interno di <h1>:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

Prova a cambiare il valore di name da 'Gregorio Y. Zara' a 'Hedy Lamarr'. Vedi come cambia il titolo della lista?

Qualsiasi espressione JavaScript funzionerà tra le parentesi graffe, inclusa la chiamata di funzioni come formatDate():

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

Dove utilizzare le parentesi graffe

Puoi usare le parentesi graffe solo in due modi all’interno di JSX:

  1. Come testo direttamente all’interno di un tag JSX: <h1>{name}'s To Do List</h1> funziona, ma <{tag}>Gregorio Y. Zara's To Do List</{tag}> non funzionerà.
  2. Come attributi immediatamente dopo il simbolo =: src={avatar} leggerà la variabile avatar, ma src="{avatar}" passerà la stringa "{avatar}".

Usare le “doppie graffe”: CSS and altri oggetti in JSX

In aggiunta alle stringhe, numeri e altre espressioni JavaScript, puoi anche passare oggetti in JSX. Gli oggetti sono anche indicati con le parentesi graffe, come { name: "Hedy Lamarr", inventions: 5 }. Pertanto, per passare un oggetto JS in JSX, devi avvolgere l’oggetto in un’altra coppia di parentesi graffe: person={{ name: "Hedy Lamarr", inventions: 5 }}.

Potresti notarlo quando usi gli stili CSS in linea in JSX. React non richiede di utilizzare gli stili in linea (le classi CSS funzionano alla grande per la maggior parte dei casi). Ma quando hai bisogno di uno stile in linea, passi un oggetto all’attributo style:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

Prova a cambiare i valori di backgroundColor e color.

Puoi vedere effettivamente l’oggetto JavaScript all’interno delle parentesi graffe quando lo scrivi in questo modo:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

La prossima volta che vedrai {{ e }} in JSX, saprai che non è altro che un oggetto all’interno delle parentesi graffe JSX!

Insidia

Inline style properties are written in camelCase. For example, HTML <ul style="background-color: black"> would be written as <ul style={{ backgroundColor: 'black' }}> in your component.

Più divertimento con gli oggetti e le parentesi graffe

Puoi spostare più espressioni in un unico oggetto e fare riferimento ad esse nel tuo JSX all’interno delle parentesi graffe:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

In questo esempio, l’oggetto JavaScript person contiene una stringa name e un oggetto theme:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

Il componente può usare questi valori da person in questo modo:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX è molto minimalista come linguaggio di templating perché ti permette di organizzare dati e logica usando JavaScript.

Riepilogo

Adesso che sai quasi tutto su JSX, ricapitoliamo:

  • attributi JSX all’interno di virgolette vengono passati come stringhe.
  • Le parentesi graffe ti permettono di portare la logica e le variabili JavaScript nel tuo markup.
  • Esse funzionano all’intero del contenuto di un tag JSX o subito dopo = negli attributi.
  • {{ e }} non fanno parte di una sintassi speciale: è un oggetto JavaScript riposto all’interno delle parentesi graffe JSX.

Prova alcune sfide

Sfida 1 di 3:
Correggi lo sbaglio

Questo codice crasha con un errore che dice Objects are not valid as a React child:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Riesci a trovare il problema?

PreviousScrivere Markup con JSX
NextPassare Props ad un Componente