# @d8660091/react-popper 中文文档

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

版本：1\.0\.4
npm 元数据更新时间：2022-06-12T16:51:08.139Z
中文译文更新时间：2026-11-14T15:29:29.158Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：2.9 MB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：3 个
- 首次发布：2018-01-27T06:17:10.511Z
- 最新版本发布：2018-06-25T14:28:26.112Z
- 近 30 天下载量：2004（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：31（近 12 个月 0 个）

## 中文简介

基于 popper.js 显示 popper 的反射组件

## 安装

```sh
npm install @d8660091/react-popper
```

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

## README

# 反弹出器

[![CircleCI](https://circleci.com/gh/d8660091/react-popper.svg?style=svg)](https://circleci.com/gh/d8660091/react-popper) [![npm version](https://badge.fury.io/js/%40d8660091%2Freact-popper.svg)](https://badge.fury.io/js/%40d8660091%2Freact-popper) [![dependencies Status](https://david-dm.org/d8660091/react-popper/status.svg)](https://david-dm.org/d8660091/react-popper)

反应 [poper.js (英语)](https://github.com/FezVrasta/popper.js) 组件.

**特征**数字 :

-   方便使用, 请检查下面的用法 .
-   对道具进行回放更改,在选项改变时重新发回弹出器.
-   例如,Nestable可以有两个弹出窗口响应 _鼠标输入_ 财务报告和审定财务报表 _单击_ 按钮的事件.

[试试看](https://d8660091.github.io/react-popper/)

## 使用量

用纱线安装 :

```shell
yarn add @d8660091/react-popper
```

或npm: (中文(简体) )

```shell
npm install @d8660091/react-popper -P
```

在您的源文件中导入 :

```jsx
import Popper from '@d8660091/react-popper'

// A simple popper
<Popper
  options={{ 
    placement: 'bottom'
  }}
  renderRef={({ setReference, toggle }) => (
    <span ref={setReference} onClick={toggle}>
      Popover Trigger
    </span>
  )}>
  <div>Popper content</div>
</Popper>

// A nested popper
<Popper
  options={{
    placement: 'right',
  }}
  renderRef={({ setReference, open, close, isOpened }) => (
    <Popper
      options={{
        placement: 'bottom',
      }}
      renderRef={({
        setReference: setInnerReference,
        toggle: innerToggle,
        isOpened: isInnerOpened
      }) => (
        <button
          ref={el => {
            setReference(el)
            setInnerReference(el)
          }}
          onClick={() => {
            close()
            innerToggle()
          }}
          onMouseEnter={() => {
            !isInnerOpened && open()
          }}
          onMouseLeave={() => {
            close()
          }}>
          A button which triggers two popper, one on hover, one on click
        </button>
      )}>
      <div>
        On click inner popper.
      </div>
    </Popper>
  )}>
  <div>
    On hover outer popper content.
  </div>
</Popper>
```

类型(index.d.ts):

```typescript
declare module '@d8660091/react-popper' {
  import { PopperOptions } from 'popper.js'
  import * as React from 'react'

  interface RenderProps extends PopperProps {
    setReference: React.Ref<HTMLElement>
    setPop: React.Ref<HTMLElement>
    isOpened: boolean
    open: () => void
    close: () => void
    toggle: () => void
  }

  type PopperProps = {
    renderRef: (props: RenderProps) => React.ReactNode
    renderPop?: (props: RenderProps) => React.ReactNode
    options?: PopperOptions
    children?: React.ReactNode
    canClickOutside?: Boolean // default: false
    style?: Object
    className?: string
    defaultIsOpened?: Boolean // default: false
  }

  const Popper: React.ComponentClass<PopperProps>

  export default Popper
}
```

-   选项: poper.js [选项](https://popper.js.org/popper-documentation.html#defaults)。 。 。 .
-   渲染参考:用于提供参考的功能,即用于定位弹出器的元素.
-   孩子们:在弹出器内满足.
-   canClick Outside:如果是真的,Popper不会在用户点击外部时隐藏自己.
-   样式和类Name: 转到 pop 而不是引用 .
-   commercePop: 如果设置了此函数, 将会忽略子, 样式和类名, 并使用此函数提供 Popper .
-   默认已打开: 挂载时是否打开 Popper

## 可点击区域a

您可以点击 ClickableRea 而不关闭 popper , 当您有一个 由 另一 家 Popper 提供的可交互 Popper 时, 则有用 .

```jsx
import { ClickableArea } from '@d8660091/react-popper'

<ClickableArea>
  clickable text
</ClickableArea>
```

[**故事书**](https://github.com/d8660091/react-popper/blob/master/.storybook/index.js) - 更多的用途,包括具体说明选项、样式和筑巢。 也可以通过现场编辑选项和放置来播放组件.

## 常见问题

### @d8660091/react-popper 是什么？

基于 popper\.js 显示 popper 的反射组件

### 如何安装 @d8660091/react-popper？

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

### @d8660091/react-popper 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/d8660091\_\_react-popper 是否存在。

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

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

### @d8660091/react-popper 可以商用吗？

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

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

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

### @d8660091/react-popper 还在维护吗？

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