# @deuex-solutions/react-tour 中文文档

规范地址：https://npmcn.com/package/%40deuex-solutions/react-tour/

版本：1\.2\.7
npm 元数据更新时间：2024-04-16T10:28:31.402Z
中文译文更新时间：2026-11-12T01:44:20.454Z
软件包许可：ISC

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

原始 npm 页面：https://www.npmjs.com/package/%40deuex-solutions/react-tour
原文对照：https://npmcn.com/package/%40deuex-solutions/react-tour/?lang=original

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

- 包体积（解压后）：48.5 kB，5 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：react ^16\.8\.6，react-dom ^16\.8\.6，styled-components ^6\.1\.8
- 首次发布：2022-01-03T07:25:06.719Z
- 最新版本发布：2024-04-16T10:28:31.233Z
- 近 30 天下载量：34985（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 0 个）

## 中文简介

向用户学习组件如何在反应应用中工作.

## 安装

```sh
npm install @deuex-solutions/react-tour
```

也可以使用：`pnpm add @deuex-solutions/react-tour`、`yarn add @deuex-solutions/react-tour`、`bun add @deuex-solutions/react-tour`

## README

# 反应-tour

私事容易办到 **指南 + 辅导** 你的反应应用.

## 如何使用

> 使用以下命令下载或复制此 repo

```js
git clone https://github.com/deuex-solutions/react-tutorial.git
```

> 包括对您的工程的反应ur.min.js 文件

```js
import ReactTour from 'reacttour.min.js'    // prod
import ReactTour from 'reacttour.js'    // dev
```

[样式组件](https://www.styled-components.com/) 它不是捆绑在包里,而是需要的 `styled-components@^6.1.8` 财务报告和审定财务报表 `react@^16.3` 由于使用 [创建参考](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs),因此:

```zsh
npm i -S styled-components@^6.1.8
# or
yarn add styled-components@^6.1.8
```

## 使用量

添加数据 `ReactTour` 应用程序中的组件,通过 `steps` 中突出的元素 _反应图_。 。 。 .

```js
import React from 'react'
import ReactTour from '@deuex-solutions/react-tour'

class App extends Component {
  // ...

  render  (
    <>
      { /* other stuff */}
      <ReactTour
        steps={steps}
        playTour={this.state.playTour}
        onRequestClose={this.closeTour} />
    </>
  )
}

const steps = [
  {
    selector: '.first-step',
    content: 'This is my first Step',
  },
  // ...
]
```

### 反弹图道具

#### 重音颜色

> 变动 `--reactour-accent` _(在 IE 上默认重音颜色)_ css 自定义道克以应用颜色 _帮助_数字、点等

类型 : `string`

默认 : `#007aff`

#### 图标

> 自定义 _徽标_ 使用的内容 `current` 财务报告和审定财务报表 `total` 步骤值

类型 : `func`

```js
// example
<ReactTour badgeContent={(curr, tot) => `${curr} of ${tot}`} />
```

#### 儿童

> 内容将在 _帮助_

类型 : `node | elem`

#### 类Name

> 自定义要添加的类名 _帮助_

类型 : `string`

#### 禁用数据导航

> 禁用与 _点_ 导航于 _帮助_

类型 : `bool`

#### 禁用交互

> 禁用以任何方式单击或间接的能力 _突出显示_ 元素

类型 : `bool`

#### 禁用键盘导航

> 在真实时禁用所有键盘导航( 下一步和预览步骤), 在数组时禁用选中的键

类型 : `bool | array(['esc', 'right', 'left'])`

```js
// example
<ReactTour disableKeyboardNavigation={['esc']} />
```

#### 突出显示的麦克克星Name

> 自定义类名, 用于在目标元素的叠加元素中添加 `disableInteraction`

类型 : `string`

#### 在维尤风险范围内

> 在像素中允许在计算元素是否在视图外滚动到视图时添加

类型 : `number`

#### 播放图

> 你知道吗..

类型 : `bool`

要求 : `true`

#### 后一条按钮

> 将最后一步中的下个按钮修改为自定义按钮以关闭巡回演唱会

类型 : `node`

```js
// example
<ReactTour lastStepNextButton={<MyButton>Done! Let's start playing</MyButton>} />
```

#### 遮盖分类Name

> 自定义要添加的类名 _口罩_

类型 : `string`

#### 遮盖空间

> 突出元素与像素之间的额外空间 _口罩_

类型 : `number`

默认 : `10`

#### 下一个按钮

> 作为下一个按钮导航的渲染器

类型 : `node`

#### 打开后

> 之后做点什么 _旅游_ 打开

类型 : `func`

```js
// example
<ReactTour onAfterOpen={target => (document.body.style.overflowY = 'hidden')} />
```

#### 在关闭前

> 做点什么之前 _旅游_ 关闭

类型 : `func`

```js
// example
<ReactTour onBeforeClose={target => (document.body.style.overflowY = 'auto')} />
```

#### 请求关闭

> 关闭 _旅游_

类型 : `func`

要求 : `true`

#### prev 按钮

> 作为预览按钮导航的渲染器

类型 : `node`

#### 四舍五入

> 变形 _帮助_ 财务报告和审定财务报表 _口罩_ 与 `border-radius` (以px计)

类型 : `number`

默认 : `0`

#### 滚动时间

> 定位目标元素时的平滑滚动持续时间( ms)

类型 : `number`

默认 : `1`

#### 滚动组合

> 滚动后定位目标元素时偏移

类型 : `number`

默认: 计算到视图端的中心

#### 显示按钮

> 显示/ 隐藏 _帮助_ 导航按钮

类型 : `bool`

默认 : `true`

#### 显示导航

> 显示/ 隐藏 _帮助_ 导航点

类型 : `bool`

默认 : `true`

#### 显示导航 数目

> 在每个导航点上徘徊时显示/隐藏编号

类型 : `bool`

默认 : `true`

#### 显示数量

> 显示/ 隐藏 _帮助_ 编号徽章

类型 : `bool`

默认 : `true`

#### 启动

> 开始步骤 _反应图_ 第一次打开

类型 : `number`

默认 : `0`

#### 步骤等时器

> 在当前状态完成后, 下一步播放延迟

类型 : `number`

默认 : `0`

#### 遮罩颜色

> 淡出未突出部分的颜色

类型 : `string`

默认 : `#000`

#### 允许 Screen 滚动

> 允许滚动屏幕

类型 : `bool`

默认 : `false`

#### 步骤

> 带有特殊信息和道具的元素串联到高架

类型 : `shape`

要求 : `true`

##### 步骤形状

```js
steps: PropTypes.arrayOf(
        PropTypes.shape({
            selector: PropTypes.string,
            content: PropTypes.oneOfType([
                PropTypes.node,
                PropTypes.element,
                PropTypes.func,
              ]).isRequired,
            position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
            arrowPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
            dropSelector: PropTypes.string,
            actionType: PropTypes.oneOf(['click', 'dblclick', 'typing', 'dragndrop','dragwithmove', 'custom', 'wait']),
            userTypeText: PropTypes.string,
            waitTimer: PropTypes.number,
            beforeStep: PropTypes.func,
            afterStep: PropTypes.func,
            beforePrev: PropTypes.func,
            beforeNext: PropTypes.func
        }),
```

##### 动作类型编号

```js
click // StepUp will be done when user click on element with given selector
dblclick  // StepUp will be done when user dbl click on element with given selector
typing  // StepUp will be done when user type exact string as userTypeText on element with given selector
dragdrop  // StepUp will be done when user drag element with given selector and drop it to element with dropSelector
dragwithmove  // StepUp will be done when user perform mouseDown element with given selector, move it to dropSelector element and at last perform mouse up on the dropselector element
custom // Control of stepUp is in authors hand by providing function to content wich will have goto and step as nextstep number
wait // StepUp will be done after waitTimer is over ( waitTimer will be in ms)
```

##### 步骤前

> 函数在执行步骤前将调用

类型 : `func`

##### 步骤之后

> 函数在执行步骤前将调用

类型 : `func`

##### 预览前

> 函数将调用上一个按钮的 Click , 并在预览步骤前执行任务

类型 : `func`

##### 下一个

> 函数将调用下个按钮的 Click , 在下一步之前执行任务

类型 : `func`

##### 步骤实例

```js
const steps = [
  {
    selector: '[data-tour="my-first-step"]',
    content: ({ goTo, inDOM }) => (
      <div>
        Lorem ipsum <button onClick={() => goTo(4)}>Go to Step 5</button>
        <br />
        {inDOM && '🎉 Look at your step!'}
      </div>
    ),
    position: 'top', // Position is optional, if not provided, tour will auto calculate the position.
    style: {
      backgroundColor: '#bada55',
    },
    // Disable interaction for this specific step.
    // Could be enabled passing `true`
    // when `disableInteraction` prop is present in Tour
    stepInteraction: false,
  },
  // ...
]
```

## 常见问题

### @deuex-solutions/react-tour 是什么？

向用户学习组件如何在反应应用中工作\.

### 如何安装 @deuex-solutions/react-tour？

在项目目录运行 npm install @deuex-solutions/react-tour，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.6）、react-dom（^16\.8\.6）、styled-components（^6\.1\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @deuex-solutions/react-tour 支持 TypeScript 吗？

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

### @deuex-solutions/react-tour 支持 ESM 还是 CommonJS？

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

### @deuex-solutions/react-tour 可以商用吗？

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

### @deuex-solutions/react-tour 的下载量有多少？

根据 npm 官方下载统计，@deuex-solutions/react-tour 在 2026/10/12 – 2026/11/10 这 30 天内被下载 34,985 次，日均约 1,166 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @deuex-solutions/react-tour 还在维护吗？

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