Aller au contenu principal

@babel/plugin-proposal-do-expressions

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Détails​

L'expression do { .. } exécute un bloc (contenant une ou plusieurs instructions), et la valeur d'achèvement de la dernière instruction à l'intérieur du bloc devient la valeur d'achèvement de l'expression do.

extrait de You Don't Know JS, Types & Grammar → Chapitre 5 → Section Valeurs d'achèvement des instructions

On peut la considérer comme une version complexe de l'opérateur ternaire :

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

Cet exemple ne représente pas le meilleur usage car il est trop simple et l'opérateur ternaire serait plus approprié, mais vous pouvez implémenter des conditions bien plus complexes dans l'expression do { ... } avec plusieurs chaînes 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");
    }
  }
};

Exemple​

Dans JSX​

L'un des usages les plus utiles de l'expression do se trouve dans JSX. Pour afficher conditionnellement un composant, nous devons généralement appeler une autre fonction qui implémente la condition et retourne la valeur appropriée, par exemple :

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>
);

Avec une expression do, vous pouvez intégrer la logique directement dans JSX :

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

Installation​

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

Utilisation​

Avec un fichier de configuration (Recommandé)​

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

Via CLI​

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

Via l'API Node​

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

Références​