@babel/plugin-transform-react-jsx

Traduzione Beta Non Ufficiale

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

informazioni

Questo plugin è incluso in @babel/preset-react

Questo plugin genera codice JS pronto per la produzione. Se stai sviluppando un'app React in un ambiente di sviluppo, utilizza @babel/plugin-transform-react-jsx-development per una migliore esperienza di debug.

Esempio

Runtime Automatico di React

Il runtime automatico è una funzionalità aggiunta in v7.9.0. Con questo runtime abilitato, le funzioni a cui JSX viene compilato vengono importate automaticamente.

In

JavaScript

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);

Out

JavaScript

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

const profile = _jsxs("div", {
  children: [
    _jsx("img", {
      src: "avatar.png",
      className: "profile",
    }),
    _jsx("h3", {
      children: [user.firstName, user.lastName].join(" "),
    }),
  ],
});

Personalizzazione dell'Import del Runtime Automatico

In

JavaScript

/** @jsxImportSource custom-jsx-library */

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);

Out

JavaScript

import { jsx as _jsx } from "custom-jsx-library/jsx-runtime";
import { jsxs as _jsxs } from "custom-jsx-library/jsx-runtime";

const profile = _jsxs("div", {
  children: [
    _jsx("img", {
      src: "avatar.png",
      className: "profile",
    }),
    _jsx("h3", {
      children: [user.firstName, user.lastName].join(" "),
    }),
  ],
});

In

JavaScript

/** @jsxRuntime classic */

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);

Out

JavaScript

const profile = React.createElement(
  "div",
  null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

Runtime Classico di React

Se non vuoi (o non puoi usare) l'import automatico, puoi usare il runtime classico, che è il comportamento predefinito per v7 e versioni precedenti.

In

JavaScript

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);

Out

JavaScript

const profile = React.createElement(
  "div",
  null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

Personalizzazione dell'Import del Runtime Classico

In

JavaScript

/** @jsx Preact.h */

import Preact from "preact";

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);

Out

JavaScript

/** @jsx Preact.h */

import Preact from "preact";

const profile = Preact.h(
  "div",
  null,
  Preact.h("img", { src: "avatar.png", className: "profile" }),
  Preact.h("h3", null, [user.firstName, user.lastName].join(" "))
);

Fragment

I Fragment sono una funzionalità disponibile da React 16.2.0+.

Runtime Automatico di React

In

JavaScript

const descriptions = items.map((item) => (
  <>
    <dt>{item.name}</dt>
    <dd>{item.value}</dd>
  </>
));

Out

JavaScript

import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";

const descriptions = items.map((item) =>
  _jsxs(_Fragment, {
    children: [
      _jsx("dt", {
        children: item.name,
      }),
      _jsx("dd", {
        children: item.value,
      }),
    ],
  })
);

Runtime Classico di React

In

JavaScript

const descriptions = items.map((item) => (
  <>
    <dt>{item.name}</dt>
    <dd>{item.value}</dd>
  </>
));

Out

JavaScript

const descriptions = items.map((item) =>
  React.createElement(
    React.Fragment,
    null,
    React.createElement("dt", null, item.name),
    React.createElement("dd", null, item.value)
  )
);

Personalizzazione con il Runtime Classico

In

JavaScript

/** @jsx Preact.h */
/** @jsxFrag Preact.Fragment */

import Preact from "preact";

var descriptions = items.map((item) => (
  <>
    <dt>{item.name}</dt>
    <dd>{item.value}</dd>
  </>
));

Out

JavaScript

/** @jsx Preact.h */
/** @jsxFrag Preact.Fragment */

import Preact from "preact";

var descriptions = items.map((item) =>
  Preact.h(
    Preact.Fragment,
    null,
    Preact.h("dt", null, item.name),
    Preact.h("dd", null, item.value)
  )
);

Nota: se viene specificato un pragma personalizzato, deve essere specificato anche un pragma per i fragment quando si utilizza la sintassi <></>. Altrimenti, verrà generato un errore.

Installazione

npm

npm install --save-dev @babel/plugin-transform-react-jsx

Yarn

yarn add --dev @babel/plugin-transform-react-jsx

pnpm

pnpm add --save-dev @babel/plugin-transform-react-jsx

Bun

bun add --dev @babel/plugin-transform-react-jsx

Utilizzo

Con un file di configurazione (Consigliato)

Senza opzioni:

babel.config.json

{
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

Con opzioni:

babel.config.json

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false, // defaults to true
        "runtime": "automatic", // defaults to classic
        "importSource": "custom-jsx-library" // defaults to react
      }
    ]
  ]
}

Tramite CLI

Shell

babel --plugins @babel/plugin-transform-react-jsx script.js

Tramite Node API

JavaScript

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-react-jsx"],
});

Opzioni

Entrambi i Runtime

throwIfNamespace

boolean, default: true.

Abilita/disabilita la generazione di un errore quando viene utilizzato un tag con namespace XML. Esempio:

Sebbene lo standard JSX lo permetta, questa opzione è disabilitata di default poiché lo JSX di React non la supporta attualmente.

consiglio

Maggiori informazioni sulla configurazione delle opzioni del plugin sono disponibili qui

runtime

classic | automatic, default: classic

Aggiunto in: v7.9.0

Determina quale runtime utilizzare.

automatic importa automaticamente le funzioni a cui JSX viene transpilato. classic non importa nulla automaticamente.

Runtime Automatico di React

importSource

string, default: react.

Aggiunto in: v7.9.0

Sostituisce la sorgente di importazione quando si importano funzioni.

Runtime Classico di React

pragma

string, default: React.createElement.

Sostituisce la funzione utilizzata durante la compilazione delle espressioni JSX. Deve essere un nome qualificato (es. React.createElement) o un identificatore (es. createElement).

Nota: il pragma @jsx React.DOM è deprecato da React v0.12

pragmaFrag

string, default: React.Fragment.

Sostituisce il componente utilizzato durante la compilazione dei frammenti JSX. Deve essere un nome di tag JSX valido.

useBuiltIns

boolean, il valore predefinito è false.

Quando si effettua lo spread delle props, utilizza Object.assign direttamente invece dell'helper extend di Babel.

useSpread

boolean, il valore predefinito è false.

Quando si effettua lo spread delle props, utilizza un oggetto inline con elementi spread direttamente invece dell'helper extend di Babel o di Object.assign.