跳至主内容

@babel/plugin-transform-react-jsx

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

信息

此插件已包含在 @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(" "))
);

片段(Fragments)​

片段是 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 经典运行时​

输入

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

使用经典运行时自定义​

输入

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

通过命令行​

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

通过 Node API​

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

配置选项​

通用配置（两种运行时）​

throwIfNamespace​

boolean 类型，默认值为 true。

控制是否在使用 XML 命名空间标签时抛出错误。例如：

虽然 JSX 规范允许此用法，但默认禁用该功能，因为 React 的 JSX 目前不支持此特性。

提示

你可以在此处阅读更多关于配置插件选项的信息。

runtime​

classic | automatic，默认值为 classic

添加于：v7.9.0

决定使用哪种运行时。

automatic 会自动导入 JSX 编译所需的函数，classic 则不会自动导入任何内容。

React 自动运行时配置​

importSource​

string 类型，默认值为 react。

添加于：v7.9.0

导入函数时替换导入来源。

React 经典运行时配置​

pragma​

string 类型，默认值为 React.createElement。

替换编译 JSX 表达式时使用的函数。应为限定名称（如 React.createElement）或标识符（如 createElement）。

注意：@jsx React.DOM pragma 自 React v0.12 起已弃用。

pragmaFrag​

string 类型，默认值为 React.Fragment。

替换编译 JSX Fragments 时使用的组件。它必须是一个有效的 JSX 标签名。

useBuiltIns​

boolean，默认为 false。

当展开属性时，直接使用 Object.assign 而不是 Babel 的扩展辅助函数。

useSpread​

boolean，默认为 false。

当展开属性时，直接使用带有展开运算符的内联对象，而不是 Babel 的扩展辅助函数或 Object.assign。