# @accessible/use-conditional-focus 中文文档

规范地址：https://npmcn.com/package/%40accessible/use-conditional-focus/

版本：3\.0\.1
npm 元数据更新时间：2022-04-04T11:07:09.864Z
中文译文更新时间：2026-11-06T03:13:39.642Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40accessible/use-conditional-focus
原文对照：https://npmcn.com/package/%40accessible/use-conditional-focus/?lang=original
项目主页：https://github.com/accessible-ui/use-conditional-focus#readme
源码仓库：https://github.com/accessible-ui/use-conditional-focus

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

- 包体积（解压后）：65.5 kB，17 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=16\.8
- 首次发布：2019-12-17T18:59:40.841Z
- 最新版本发布：2020-11-27T21:44:50.453Z
- 近 30 天下载量：5861（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 0 个）

## 中文简介

有条件的聚焦元素及其子女的反应钩.

## 安装

```sh
npm install @accessible/use-conditional-focus
```

也可以使用：`pnpm add @accessible/use-conditional-focus`、`yarn add @accessible/use-conditional-focus`、`bun add @accessible/use-conditional-focus`

## README

* * *

# 条件焦点( )

 [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/@accessible/use-conditional-focus?style=for-the-badge&labelColor=24292e)](https://bundlephobia.com/result?p=@accessible/use-conditional-focus)[![Code coverage](https://img.shields.io/codecov/c/gh/accessible-ui/use-conditional-focus?style=for-the-badge&labelColor=24292e) ](https://codecov.io/gh/accessible-ui/use-conditional-focus)[![Build status](https://img.shields.io/travis/accessible-ui/use-conditional-focus?style=for-the-badge&labelColor=24292e) ](https://travis-ci.org/accessible-ui/use-conditional-focus)[![NPM Version](https://img.shields.io/npm/v/@accessible/use-conditional-focus?style=for-the-badge&labelColor=24292e) ](https://www.npmjs.com/package/@accessible/use-conditional-focus)[![MIT License](https://img.shields.io/npm/l/@accessible/use-conditional-focus?style=for-the-badge&labelColor=24292e)](https://jaredlunde.mit-license.org/)

npm i @accessible/use-conditional-focus

* * *

反应钩,将有条件地聚焦元素. 默认情况下, 它将聚焦于第一个可聚焦 根元素的子项目,但也可以选择包括根.

## 快速启动

```jsx
import * as React from 'react'
import useConditionalFocus from '@accessible/use-conditional-focus'

const Component = () => {
  const ref = React.useRef(null)
  const [visible, setVisible] = React.useState(false)
  // Focuses the first focusable child in the `ref` element when
  // visible is `true`
  useConditionalFocus(ref, visible)

  return (
    <div>
      <div ref={ref}>
        // This button will be focused when `visible` is true
        <button onClick={() => setVisible(false)}>Close me</button>
      </div>
      <button onClick={() => setVisible(true)}>Click me</button>
    </div>
  )
}
```

## API 密码

### 使用有条件焦点( 目标, 是否应该焦点, 选项 )

#### 参数

| Prop | 类型 | 默认 | 需要吗? | 说明 |
| --- | --- | --- | --- | --- |
| 目标 | `React.RefObject<T> | T | Window | Document | null` |  | 对 | 反应参考,元素, `window`,或 `document` |
| 应聚焦 | `boolean` | `false` | 对 | 提供a `true` 值在此聚焦元素中的第一个可聚焦的孩子. |
| 选项 | [`UseConditionalFocusOptions`](https://npmcn.com/package/%40accessible/use-conditional-focus/#readme-useconditonalfocusoptions) | `{includeRoot: false, preventScroll: false}` | 没有 | 见 [`UseConditionalFocusOptions`](https://npmcn.com/package/%40accessible/use-conditional-focus/#readme-useconditonalfocusoptions)。 。 。 . |

#### `UseConditonalFocusOptions`

| Prop | 类型 | 默认 | 需要吗? | 说明 |
| --- | --- | --- | --- | --- |
| 包含旋转 | `boolean` | `false` | 没有 | 何时 `true` 除了儿童之外,这将努力把重点放在根本因素上. |
| 防止滚动 | `boolean` | `false` | 没有 | 何时 `true` 这将防止您的浏览器滚动文档,使新聚焦的元素进入视图. |

#### 回返 `void`

## 自由主义

麻省理工学院

## 常见问题

### @accessible/use-conditional-focus 是什么？

有条件的聚焦元素及其子女的反应钩\.

### 如何安装 @accessible/use-conditional-focus？

在项目目录运行 npm install @accessible/use-conditional-focus，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @accessible/use-conditional-focus 支持 TypeScript 吗？

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

### @accessible/use-conditional-focus 支持 ESM 还是 CommonJS？

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

### @accessible/use-conditional-focus 可以商用吗？

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

### @accessible/use-conditional-focus 的下载量有多少？

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

### @accessible/use-conditional-focus 还在维护吗？

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