Saltar al contenido principal

@babel/plugin-proposal-do-expressions

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Detalles​

La expresión do { .. } ejecuta un bloque (con una o varias sentencias dentro), y el valor de finalización de la última sentencia dentro del bloque se convierte en el valor de finalización de la expresión do.

extraído de You Don't Know JS, Tipos y Gramática -> Capítulo 5 -> Sección Valores de Finalización de Sentencias

Puede considerarse como una versión compleja del operador ternario:

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

Este ejemplo no representa el mejor uso porque es demasiado simple y sería preferible emplear un operador ternario, pero puedes tener condiciones mucho más complejas en la expresión do { ... } con varias cadenas 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");
    }
  }
};

Ejemplo​

En JSX​

Uno de los usos más prácticos de la expresión do es dentro de JSX. Si queremos mostrar un componente condicionalmente, normalmente debemos llamar a otra función que implemente la condición y devuelva el valor correcto, por ejemplo:

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 una expresión do puedes añadir lógica directamente dentro de JSX:

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

Instalación​

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

Uso​

Mediante un archivo de configuración (Recomendado)​

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

Mediante la CLI​

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

Mediante la API de Node​

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

Referencias​