@babel/plugin-transform-react-jsx

資訊

此外掛程式包含在 @babel/preset-react 中

此外掛程式會產生可供生產環境使用的 JS 程式碼。如果您是在開發環境中開發 React 應用程式，請使用 @babel/plugin-transform-react-jsx-development 以獲得更好的除錯體驗。

範例

React 自動執行時間

自動執行時間是 v7.9.0 中新增的功能。啟用此執行時間後，JSX 編譯成的函式會自動匯入。

在

JavaScript

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

輸出

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(" "),
    }),
  ],
});

自訂自動執行時間匯入

在

JavaScript

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

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

輸出

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(" "),
    }),
  ],
});

在

JavaScript

/** @jsxRuntime classic */

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

輸出

JavaScript

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

React 傳統執行時間

如果您不想要（或無法使用）自動匯入，您可以使用傳統執行時間，這是 v7 及更早版本中的預設行為。

在

JavaScript

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

輸出

JavaScript

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

自訂傳統執行時間匯入

在

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

輸出

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

片段

片段是 React 16.2.0+ 中提供的一項功能。

React 自動執行時間

在

JavaScript

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

輸出

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,
      }),
    ],
  })
);

React Classic Runtime

在

JavaScript

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

輸出

JavaScript

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

使用 Classic Runtime 進行自訂化

在

JavaScript

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

import Preact from "preact";

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

輸出

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

請注意，如果指定了自訂 pragma，則在使用片段語法 <></> 時，也必須指定自訂片段 pragma。否則，將會擲回錯誤。

安裝

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

用法

使用設定檔 (建議)

不含選項

babel.config.json

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

含選項

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
      }
    ]
  ]
}

透過 CLI

Shell

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

透過 Node API

JavaScript

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

選項

兩種 Runtime

throwIfNamespace

布林值，預設為 true。

切換是否在使用 XML 名稱空間標籤名稱時擲回錯誤。例如

儘管 JSX 規範允許這樣做，但預設會停用，因為 React 的 JSX 目前不支援它。

提示

您可以在 這裡 閱讀有關配置外掛選項的更多資訊

runtime

classic | automatic，預設為 classic

新增於：v7.9.0

決定要使用哪個執行時間。

automatic 自動匯入 JSX 編譯的函式。classic 沒有自動匯入任何內容。

React 自動執行時間

importSource

字串，預設為 react。

新增於：v7.9.0

匯入函式時取代匯入來源。

React 經典執行時間

pragma

字串，預設為 React.createElement。

編譯 JSX 表達式時取代使用的函式。它應該是限定名稱（例如 React.createElement）或識別碼（例如 createElement）。

請注意，@jsx React.DOM pragma 已於 React v0.12 中棄用

pragmaFrag

字串，預設為 React.Fragment。

替換編譯 JSX 片段時使用的元件。它應該是一個有效的 JSX 標籤名稱。

useBuiltIns

布林值，預設為 false。

在散佈屬性時，直接使用 Object.assign，而不是 Babel 的 extend 輔助函式。

useSpread

布林值，預設為 false。

在散佈屬性時，直接使用包含散佈元素的內嵌物件，而不是 Babel 的 extend 輔助函式或 Object.assign。