# @7rulnik/react-element-to-jsx-string 中文文档

规范地址：https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/

版本：17\.0\.1
npm 元数据更新时间：2025-04-20T20:01:25.454Z
中文译文更新时间：2026-11-05T22:02:50.898Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%407rulnik/react-element-to-jsx-string
原文对照：https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/?lang=original
项目主页：https://github.com/7rulnik/react-element-to-jsx-string#readme
源码仓库：https://github.com/7rulnik/react-element-to-jsx-string

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：215 kB，29 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，react-is ^19\.0\.0
- 首次发布：2025-04-20T18:51:12.297Z
- 最新版本发布：2025-04-20T20:01:25.291Z
- 近 30 天下载量：14253（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

将一个ReactElement转换成相应的JSX字符串.

## 安装

```sh
npm install @7rulnik/react-element-to-jsx-string
```

也可以使用：`pnpm add @7rulnik/react-element-to-jsx-string`、`yarn add @7rulnik/react-element-to-jsx-string`、`bun add @7rulnik/react-element-to-jsx-string`

## README

# 反应 - 元素到 jsx- 字符串

[![Version](https://img.shields.io/npm/v/react-element-to-jsx-string.svg?style=flat-square)](https://npmjs.org/package/react-element-to-jsx-string) [![Build Status](https://img.shields.io/travis/algolia/react-element-to-jsx-string/master.svg?style=flat-square)](https://travis-ci.org/algolia/react-element-to-jsx-string) [![License](http://img.shields.io/badge/license-MIT-green.svg?style=flat-square)](https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/LICENSE) [![Downloads](https://img.shields.io/npm/dm/react-element-to-jsx-string.svg?style=flat-square)](http://npm-stat.com/charts.html?package=react-element-to-jsx-string)

将一个ReactElement转换成相应的JSX字符串.

对单位测试和任何其他需要都有用.

特征 :

-   支持筑巢和深层筑巢 `<div a={{b: {c: {d: <div />}}}} />`
-   道具:支持字符串,数字,函数(内含为 `prop={function noRefCheck() {}}`),对象,ReactElement(内含)、regex、布林斯(含或不含) [短手语法](https://facebook.github.io/react/docs/jsx-in-depth.html#boolean-attributes)),(中文(简体) ).
-   按字母顺序排列道具
-   按定序排序对象键(`o={{a: 1, b:2}} === o={{b:2, a:1}}`(中文(简体) )
-   控件 `ref` 财务报告和审定财务报表 `key` 属性,它们总是在道具上
-   React 的文件缩进风格

**目录** _生成方式 [DocTOC 文档](https://github.com/thlorenz/doctoc)_

-   [设置](https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/#readme-setup)
-   [使用量](https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/#readme-usage)
-   [API 密码](https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/#readme-api)
    -   [反应 ElementToJSXString( reactElement \[, 选项\])](https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/#readme-reactelementtojsxstringreactelement-options)
-   [环境要求](https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/#readme-environment-requirements)
-   [测试](https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/#readme-test)
-   [构建](https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/#readme-build)
-   [释放](https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/#readme-release)
-   [谢谢](https://npmcn.com/package/%407rulnik/react-element-to-jsx-string/#readme-thanks)

## 设置

```sh
yarn add react-element-to-jsx-string [--dev]
```

## 使用量

```js
import React from 'react';
import reactElementToJSXString from 'react-element-to-jsx-string';

console.log(reactElementToJSXString(<div a="1" b="2">Hello, world!</div>));
// <div
//   a="1"
//   b="2"
// >
//   Hello, world!
// </div>
```

## API 密码

### 反应 ElementToJSXString( reactElement \[, 选项\])

**选项.DisplayName:函数(ReactElement)**

提供不同的算法, 负责查找您元素的正确显示名称( 基础类的名称) .

只需返回您想要的名称, 用于提供 ReactElement, 作为字符串 .

**选项. filter Props: string \[\] QQ(val: any, key: string) QQ布尔,默认 \[\]**

如果传递出一系列字符串,则过滤出任何名下道具 阵列。 例如 \['key'\] 将抑制密钥="被添加的道具.

如果一个函数被通过,将要求每个道具有两个参数, 鼠标值和密钥,并将过滤出任何返回的假数据.

**选项.show Default Props:布尔,默认为真实**

如果真实, 则显示默认道具 .

如果错误,默认道具会被省略,除非它们与默认值不同.

**选项。显示函数:布尔、默认虚假**

如果为真,则显示函数机构.

如果错误, 函数机构将被替换为 `function noRefCheck() {}`。 。 。 .

**选项。功能 值:函数,默认值 `(fn) => fn`**

允许您覆盖函数值的默认格式.

`functionValue` 作为输入收到原始函数引用 ,并应当发送任何值作为输出.

**选项.tab stop: 数字, 默认 2**

为缩进提供不同的列.

**选项。使用BooleanShorthand语法:布尔语,默认为真**

如果选中的话, 布尔道具值将被省略 [短手语法](https://facebook.github.io/react/docs/jsx-in-depth.html#boolean-attributes)。 。 。 .

如果错误, 布尔道具值会像 `prop={true}` 财务报告和审定财务报表 `prop={false}`

**选项.max InlineAttizes LineLength:数字,默认未定义**

允许在同一行上渲染多个属性并控制行为.

您可以提供最大字符数, 与标签名称一起渲染 。 如果线上字符数( 包括间隔和标签名) 超过此数字,然后所有属性都会在单独的行上显示。 此选项的默认值是 `undefined`。如果此选项是 `undefined` 如果一个元素上有一个以上的属性,它们就会在自己的线上产生. 注意: 作为属性值传递的对象总是渲染出 数行

**选项。sortops:布尔,默认为真实**

要么整理,要么不整理道具。 如果您使用这个 lib 来做一些异态渲染, 您应该设置它为虚假, 否则会导致无效的校验和, 因为道具顺序是反应异态校验和算法的一部分 .

**选项.use FragmentShort 语法:布尔,默认真实**

如果属实, 片段将用 JSX 的简短语法代表 `<>...</>` (尽可能).

如果错误,片段将永远用 JSX 的明确语法表示 `<React.Fragment>...</React.Fragment>`。 。 。 .

根据 [规格](https://reactjs.org/docs/fragments.html)数字 :

-   密钥片段将总是使用明确的语法: `<React.Fragment key={...}>...</React.Fragment>`
-   空片段将总是使用明确的语法: `<React.Fragment />`

注:要使用碎片,必须使用 QQ 16.2 反应

## 环境要求

您使用的环境 `react-element-to-jsx-string` 应该有 [ES2015 (英语)](https://babeljs.io/learn-es2015/) 支助.

使用 [贝贝多填充](https://babeljs.io/docs/usage/polyfill/) 或者任何其他会让你 环境行为类似ES2015环境.

## 测试

```sh
yarn test
yarn test:watch
```

## 构建

```sh
yarn build
yarn build:watch
```

## 释放

决定这是不是 `patch`, (中文(简体) ), `minor` 或者说 `major` 释放,你看 [http://semver.org/ (中文(简体) )](http://semver.org/)

```sh
npm run release [major|minor|patch|x.x.x]
```

## 谢谢

[alexlande/反应对jsx](https://github.com/alexlande/react-to-jsx/) 是一个很好的灵感来源.

我们建造了自己的模块 因为我们有些需要 比如按字母顺序订购道具.

## 常见问题

### @7rulnik/react-element-to-jsx-string 是什么？

将一个ReactElement转换成相应的JSX字符串\.

### 如何安装 @7rulnik/react-element-to-jsx-string？

在项目目录运行 npm install @7rulnik/react-element-to-jsx-string，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）、react-is（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @7rulnik/react-element-to-jsx-string 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @7rulnik/react-element-to-jsx-string 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @7rulnik/react-element-to-jsx-string 可以商用吗？

@7rulnik/react-element-to-jsx-string 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @7rulnik/react-element-to-jsx-string 的下载量有多少？

根据 npm 官方下载统计，@7rulnik/react-element-to-jsx-string 在 2026/10/05 – 2026/11/03 这 30 天内被下载 14,253 次，日均约 475 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @7rulnik/react-element-to-jsx-string 还在维护吗？

最新版本 17\.0\.1 发布于 2025/04/21（1\.5 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/04/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。