@babel/plugin-transform-react-jsx

信息

此插件包含在 @babel/preset-react 中

¥This plugin is included in @babel/preset-react

该插件生成可用于生产的 JS 代码。如果你在开发环境中开发 React 应用，请使用 @babel/plugin-transform-react-jsx-development 以获得更好的调试体验。

¥This plugin generates production-ready JS code. If you are developing a React app in a development environment, please use @babel/plugin-transform-react-jsx-development for a better debugging experience.

示例

¥Example

React 自动运行时

¥React Automatic Runtime

自动运行时是 v7.9.0 中添加的功能。启用此运行时，将自动导入 JSX 编译成的函数。

¥Automatic runtime is a feature added in v7.9.0. With this runtime enabled, the functions that JSX compiles to will be imported automatically.

输入

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

自定义自动运行时导入

¥Customizing the Automatic Runtime Import

输入

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

React 经典运行时

¥React Classic Runtime

如果你不想（或不能使用）自动导入，你可以使用经典运行时，这是 v7 和更早版本的默认行为。

¥If you do not want (or cannot use) auto importing, you can use the classic runtime, which is the default behavior for v7 and prior.

输入

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

自定义经典运行时导入

¥Customizing the Classic Runtime Import

输入

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

片段

¥Fragments

片段是 React 16.2.0+ 中可用的功能。

¥Fragments are a feature available in React 16.2.0+.

React 自动运行时

¥React Automatic Runtime

输入

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

React 经典运行时

¥React Classic Runtime

输入

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

使用经典运行时进行自定义

¥Customizing with the Classic Runtime

输入

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

请注意，如果指定了自定义编译指示，并且使用片段语法 <></>，则还必须指定自定义片段编译指示。否则会抛出错误。

¥Note that if a custom pragma is specified, then a custom fragment pragma must also be specified if the fragment syntax <></> is used. Otherwise, an error will be thrown.

安装

¥Installation

npm
Yarn
pnpm

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

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

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

用法

¥Usage

使用配置文件（推荐）

¥With a configuration file (Recommended)

没有选项：

¥Without options:

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

有选项：

¥With options:

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

¥Via CLI

Shell

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

通过 Node API

¥Via Node API

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

选项

¥Options

两个运行时

¥Both Runtimes

`throwIfNamespace`

boolean，默认为 true。

¥boolean, defaults to true.

如果使用 XML 命名空间标记名称，则切换是否引发错误。例如：

¥Toggles whether or not to throw an error if an XML namespaced tag name is used. For example:

<f:image />

尽管 JSX 规范允许这样做，但默认情况下它是禁用的，因为 React 的 JSX 目前不支持它。

¥Though the JSX spec allows this, it is disabled by default since React's JSX does not currently have support for it.

提示

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

¥You can read more about configuring plugin options here

`runtime`

classic | automatic，默认为 classic

¥classic | automatic, defaults to classic

添加于：v7.9.0

¥Added in: v7.9.0

决定使用哪个运行时。

¥Decides which runtime to use.

automatic 自动导入 JSX 转译成的函数。classic 不会自动导入任何内容。

¥automatic auto imports the functions that JSX transpiles to. classic does not automatically import anything.

React 自动运行时

¥React Automatic Runtime

importSource

string，默认为 react。

¥string, defaults to react.

添加于：v7.9.0

¥Added in: v7.9.0

导入函数时替换导入源。

¥Replaces the import source when importing functions.

React 经典运行时

¥React Classic Runtime

`pragma`

string，默认为 React.createElement。

¥string, defaults to React.createElement.

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

¥Replace the function used when compiling JSX expressions. It should be a qualified name (e.g. React.createElement) or an identifier (e.g. createElement).

请注意，从 React v0.12 开始，@jsx React.DOM pragma 已被弃用

¥Note that the @jsx React.DOM pragma has been deprecated as of React v0.12

`pragmaFrag`

string，默认为 React.Fragment。

¥string, defaults to React.Fragment.

替换编译 JSX 片段时使用的组件。它应该是一个有效的 JSX 标签名。

¥Replace the component used when compiling JSX fragments. It should be a valid JSX tag name.

`useBuiltIns`

boolean，默认为 false。

¥boolean, defaults to false.

传播 props 时，直接使用 Object.assign 代替 Babel 的 extend helper。

¥When spreading props, use Object.assign directly instead of Babel's extend helper.

`useSpread`

boolean，默认为 false。

¥boolean, defaults to false.

展开 props 时，直接使用带有展开元素的内联对象，而不是 Babel 的扩展助手或 Object.assign。

¥When spreading props, use inline object with spread elements directly instead of Babel's extend helper or Object.assign.

示例​

React 自动运行时​

自定义自动运行时导入​

React 经典运行时​

自定义经典运行时导入​

片段​

React 自动运行时​

React 经典运行时​

使用经典运行时进行自定义​

安装​

用法​

使用配置文件（推荐）​

通过 CLI​

通过 Node API​

选项​

两个运行时​

throwIfNamespace​

runtime​

React 自动运行时​

importSource​

React 经典运行时​

pragma​

pragmaFrag​

useBuiltIns​

useSpread​

示例

React 自动运行时

自定义自动运行时导入

React 经典运行时

自定义经典运行时导入

片段

React 自动运行时

React 经典运行时

使用经典运行时进行自定义

安装

用法

使用配置文件（推荐）

通过 CLI

通过 Node API

选项

两个运行时

`throwIfNamespace`

`runtime`

React 自动运行时

importSource

React 经典运行时

`pragma`

`pragmaFrag`

`useBuiltIns`

`useSpread`