Vai al contenuto principale

@babel/plugin-proposal-do-expressions

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Dettagli​

L'espressione do { .. } esegue un blocco (contenente una o più istruzioni) e il valore di completamento dell'ultima istruzione all'interno del blocco diventa il valore di completamento dell'espressione do.

da You Don't Know JS, Tipi e Grammatica -> Capitolo 5 -> Sezione Valori di Completamento Istruzione

Può essere vista come una versione complessa dell'operatore ternario:

JavaScript
let a = do {
  if (x > 10) {
    ("big");
  } else {
    ("small");
  }
};
// is equivalent to:
let a = x > 10 ? "big" : "small";

Questo esempio non rappresenta l'utilizzo migliore poiché è troppo semplice e l'operatore ternario sarebbe un'opzione preferibile, ma è possibile implementare condizioni molto più complesse nell'espressione do { ... } con diverse catene if ... else:

JavaScript
let x = 100;
let y = 20;

let a = do {
  if (x > 10) {
    if (y > 20) {
      ("big x, big y");
    } else {
      ("big x, small y");
    }
  } else {
    if (y > 10) {
      ("small x, big y");
    } else {
      ("small x, small y");
    }
  }
};

Esempio​

In JSX​

Uno degli utilizzi più utili dell'espressione do è all'interno di JSX. Per visualizzare condizionalmente un componente solitamente è necessario chiamare una funzione separata che implementa la condizione e restituisce il valore corretto, ad esempio:

JavaScript
const getColoredComponent = color => {
  if (color === "blue") {
    return <BlueComponent />;
  }
  if (color === "red") {
    return <RedComponent />;
  }
  if (color === "green") {
    return <GreenComponent />;
  }
};

const Component = props => (
  <div className="myComponent">{getColoredComponent()}</div>
);

Con un'espressione do è possibile aggiungere logica direttamente in JSX:

JavaScript
const Component = props => (
  <div className="myComponent">
    {do {
      if (color === "blue") {
        <BlueComponent />;
      } else if (color === "red") {
        <RedComponent />;
      } else if (color === "green") {
        <GreenComponent />;
      }
    }}
  </div>
);

Installazione​

npm install --save-dev @babel/plugin-proposal-do-expressions

Utilizzo​

Con un file di configurazione (Consigliato)​

babel.config.json
{
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}

Tramite CLI​

Shell
babel --plugins @babel/plugin-proposal-do-expressions script.js

Tramite Node API​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-proposal-do-expressions"],
});

Riferimenti​