# @fullpage/react-fullpage 中文文档

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

版本：0\.1\.49
npm 元数据更新时间：2025-07-04T11:06:02.571Z
中文译文更新时间：2026-11-15T16:39:04.748Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40fullpage/react-fullpage
原文对照：https://npmcn.com/package/%40fullpage/react-fullpage/?lang=original
项目主页：https://github.com/alvarotrigo/react-fullpage
源码仓库：https://github.com/alvarotrigo/react-fullpage

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

- 包体积（解压后）：991 kB，158 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2018-07-30T23:07:24.275Z
- 最新版本发布：2025-07-04T11:06:02.313Z
- 近 30 天下载量：21509（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：56（近 12 个月 0 个）

## 中文简介

FullPage.js 的官方反应包装器

## 安装

```sh
npm install @fullpage/react-fullpage
```

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

## README

# 反应全页

![preview](https://raw.githubusercontent.com/alvarotrigo/react-fullpage/master/assets/images/react-fullpage-logo.png)

官方反应包装 [完整页.js 库](https://github.com/alvarotrigo/fullPage.js/)

[![react-fullpage version](https://img.shields.io/npm/v/@fullpage/react-fullpage/latest.svg)](https://www.npmjs.com/package/@fullpage/react-fullpage)

-   [在线演示](https://alvarotrigo.com/react-fullpage/) | [代码框](https://codesandbox.io/s/m34yq5q0qx)
-   [完整页.js 扩展](https://alvarotrigo.com/fullPage/extensions/)
-   带来的 [@ imac2](https://twitter.com/imac2) 感谢 [迈克尔·沃克](https://github.com/cmswalker)。 。 。 .

## 浏览器支持

| [![IE / Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/)  
IE / 边缘 | [![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/)  
火花 | [![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/)  
颜色 | [![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/)  
萨法里 | [![iOS Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png)](http://godban.github.io/browsers-support-badges/)  
iOS 萨法里 | [![Samsung](https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png)](http://godban.github.io/browsers-support-badges/)  
三星,三星,三星,三星,三星 | [![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png)](http://godban.github.io/browsers-support-badges/)  
歌剧 |
| --- | --- | --- | --- | --- | --- | --- |
| IE11,边缘 | 上两个版本 | 上两个版本 | 上两个版本 | 上两个版本 | 上两个版本 | 上两个版本 |
|  |  |  |  |  |  |  |

## 目录

-   [安装](https://github.com/alvarotrigo/react-fullpage#installation)
-   [许可证](https://github.com/alvarotrigo/react-fullpage#license)
-   [使用量](https://github.com/alvarotrigo/react-fullpage#usage)
-   [实例](https://github.com/alvarotrigo/react-fullpage#examples)
-   [状态](https://github.com/alvarotrigo/react-fullpage#state)
-   [道具](https://github.com/alvarotrigo/react-fullpage#props)
-   [方法](https://github.com/alvarotrigo/react-fullpage#methods)
-   [回电](https://github.com/alvarotrigo/react-fullpage#callbacks)
-   [捐款](https://github.com/alvarotrigo/react-fullpage#contributing)
-   [资源](https://github.com/alvarotrigo/react-fullpage#resources)

## 安装

```sh
npm install @fullpage/react-fullpage
```

这将安装包装以及 [完整页.js](https://github.com/alvarotrigo/fullPage.js/)

## 许可证

### 非开源许可证

如果您想使用反应-全页来开发非开源网站,主题,项目和应用程序,商业许可证就是适当的许可证. 使用此选项, 您的源代码为专有 。 也就是说,你不必将整个应用程序的源代码更改为开源许可证. [购买全页商业许可证](https://alvarotrigo.com/fullPage/pricing/)。 。 。 .

### 开源许可证

如果您正在创建一个与该许可兼容的开源应用程序 [GNU GPL 许可证 v3](https://www.gnu.org/licenses/gpl-3.0.html),您可以根据GPLv3的规定使用全Page.

**JavaScript 和 CSS 文件中的信用注释应当完整保存** (即使在合并或微分之后)

[更多信息,请查看Page的驾照](https://alvarotrigo.com/fullPage/pricing/)。 。 。 .

## 使用量

此包装器创建 `<ReactFullpage />` 组件。 它暴露出一个渲染道具 API,所以在整页.js库中标记可以保持不变。 渲染道克接受其回调中包含组件反应属性状态,上下文等参数的1个参数.

## UMD 图像

对于没有建设步骤的人,可提供UMD捆绑.

```js
import ReactFullpage from '@fullpage/react-fullpage-umd'; // will return static version on server and "live" version on client
```

## 服务器侧面渲染( SSR)

SSR 被支持, 但是服务器发送的 html 将不会被样式化, 这是因为 `window` 必须在场才能正确设置 `height` + 键 `width` 幻灯片。 只要您在浏览器环境中将您的整页组件再加水,就会应用正则样式.

当使用 SSR 或 ext.js 等框架时,组件会根据存在的动态调整自身 `window`

```js
import ReactFullpage from '@fullpage/react-fullpage'; // will return static version on server and "live" version on client
```

### 安全部门改革实例:

你可以找到一个 [盖茨比](https://github.com/alvarotrigo/react-fullpage/tree/master/examples/gatsby/) (单位:千美元) [下一个.js](https://github.com/alvarotrigo/react-fullpage/tree/master/examples/next/) 实例 [“实例”文件夹](https://github.com/alvarotrigo/react-fullpage/tree/master/examples)但这里还有其它的: [加兹比](https://github.com/cmswalker/gatsby_react-fullPage_Invariant-Violation-130) [下一个.js](https://github.com/cmswalker/react-fullpage-next-example)

## 实例

深入的例子可以找到 [这里](https://github.com/alvarotrigo/react-fullpage/tree/master/examples)您可以从 [反应示例](https://github.com/alvarotrigo/react-fullpage/tree/master/examples/react)。 。 。 .

### 快速启动示例 :

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import ReactFullpage from '@fullpage/react-fullpage';

const Fullpage = () => (
  <ReactFullpage
    //fullpage options
    licenseKey = {'YOUR_KEY_HERE'}
    scrollingSpeed = {1000} /* Options here */

    render={({ state, fullpageApi }) => {
      return (
        <ReactFullpage.Wrapper>
          <div className="section">
            <p>Section 1 (welcome to fullpage.js)</p>
            <button onClick={() => fullpageApi.moveSectionDown()}>
              Click me to move down
            </button>
          </div>
          <div className="section">
            <p>Section 2</p>
          </div>
        </ReactFullpage.Wrapper>
      );
    }}
  />
);

const root = ReactDOM.createRoot(document.getElementById('react-root'));
root.render(<Fullpage />);
```

### Fullpage.js 扩展示例 :

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import ReactFullpage from '@fullpage/react-fullpage';

// NOTE: if using fullpage extensions/plugins put them here and pass it as props
const pluginWrapper = () => {
  require('./statics/fullpage.scrollHorizontally.min');
};

const Fullpage = () => (
  <ReactFullpage
    pluginWrapper = {pluginWrapper}

    //fullpage options
    licenseKey = {'YOUR_KEY_HERE'}
    scrollingSpeed = {1000} /* Options here */
    scrollHorizontally = {true}  /* Because we are using the extension */
    scrollHorizontallyKey = {'YOUR KEY HERE'}

    render={({ state, fullpageApi }) => {
      return (
        <ReactFullpage.Wrapper>
          <div className="section">
            <p>Section 1 (welcome to fullpage.js)</p>
            <button onClick={() => fullpageApi.moveSectionDown()}>
              Click me to move down
            </button>
          </div>
          <div className="section">
            <p>Section 2</p>
          </div>
        </ReactFullpage.Wrapper>
      );
    }}
  />
);

const root = ReactDOM.createRoot(document.getElementById('react-root'));
root.render(<Fullpage />);
```

通知在使用时 [fullPage.js 扩展名](https://alvarotrigo.com/fullPage/extensions/) 你会通过 `pluginWrapper` 函数道具,用于在 `react-fullpage` 组件已安装.

## 状态

包装机根据最新版本的fullpage.js保持状态 [调用](https://alvarotrigo.com/fullPage/docs/#callbacks)

引发状态变化的最新召回事件将作为 `state.lastEvent`

_注:如果通过v2道具,状态将映射到v2 [调用](https://github.com/alvarotrigo/fullPage.js/tree/v.2.9.7#callbacks)_

## 道具

你可以使用任意 [选项](https://alvarotrigo.com/fullPage/docs/#options) 由完整Page.js库作为反应道具支持.

道具对象可以包含标准 [选项](https://alvarotrigo.com/fullPage/docs/#options) 以及全页.js [调用](https://alvarotrigo.com/fullPage/docs/#callbacks)。 。 。 .

[示例](https://codesandbox.io/s/8lpo68lp28)

更多回调 [这里](https://alvarotrigo.com/fullPage/docs/#callbacks)

## 方法

fullPage.js 包含许多 [方法](https://alvarotrigo.com/fullPage/docs/#methods)。 。 。 . 你可以使用其中的任何一种。 这些物品作为进口物品提供 `fullpage.js` 一旦第一次渲染已经发生,则会创建库.

## 回电

每一个传入组件的回调名称将保持状态本身,这将通过 [渲染道具](https://npmcn.com/package/%40fullpage/react-fullpage/#readme-usage) 回调参数和由fullpage.js发射的最新回调将反映在 [状态](https://npmcn.com/package/%40fullpage/react-fullpage/#readme-state)。 。 。 .

## 样式

所有满页.js样式均通过 a 从组件中加载 `<style/>` 用 Javascript 创建的标签。 要覆盖整页.js样式,您必须匹配特异性。 示例 [这里](https://codesandbox.io/s/z2q912835l) 输入 `overrides.css` 文件

## 捐款

有问题吗? 有主意吗? 看看这个 [捐款](https://github.com/alvarotrigo/react-fullpage/blob/master/CONTRIBUTING.md) 引导和打开 PR

## 资源

-   [Wordpress 主题](https://alvarotrigo.com/fullPage/utils/wordpress.html)
-   [CSS Easing 动画工具 - 马修·莱恩](http://matthewlein.com/ceaser/) (有助于定义 `easingcss3` 数值)
-   [全页.js jsDelivr CDN](http://www.jsdelivr.com/#!jquery.fullpage)

## 常见问题

### @fullpage/react-fullpage 是什么？

FullPage\.js 的官方反应包装器

### 如何安装 @fullpage/react-fullpage？

在项目目录运行 npm install @fullpage/react-fullpage，或使用 pnpm add / yarn add / bun add。

### @fullpage/react-fullpage 支持 TypeScript 吗？

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

### @fullpage/react-fullpage 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @fullpage/react-fullpage 可以商用吗？

@fullpage/react-fullpage 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @fullpage/react-fullpage 的下载量有多少？

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

### @fullpage/react-fullpage 还在维护吗？

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