# @fluentui/react-bindings 中文文档

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

版本：0\.71\.4
npm 元数据更新时间：2026-07-24T19:28:18.806Z
中文译文更新时间：2026-11-15T01:27:57.417Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：1.2 MB，390 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：11 个
- peer 依赖：react ^18，react-dom ^18，scheduler ^0\.23\.0
- 首次发布：2019-12-05T18:20:52.130Z
- 最新版本发布：2026-04-28T16:29:51.333Z
- 近 30 天下载量：86230（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：92（近 12 个月 4 个）

## 中文简介

一套组件和钩子来构建组件库和UI工具包.

## 安装

```sh
npm install @fluentui/react-bindings
```

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

## README

# `@fluentui/react-bindings`

一套可再使用的组件和钩子来构建组件库和UI工具包.

-   [安装](https://npmcn.com/package/%40fluentui/react-bindings/#readme-installation)
-   [钩子](https://npmcn.com/package/%40fluentui/react-bindings/#readme-hooks)
    -   [`useAccesibility()`](https://npmcn.com/package/%40fluentui/react-bindings/#readme-useaccesibility)
        -   [使用量](https://npmcn.com/package/%40fluentui/react-bindings/#readme-usage)
    -   [`useAutoControlled()`](https://npmcn.com/package/%40fluentui/react-bindings/#readme-useautocontrolled)
        -   [使用量](https://npmcn.com/package/%40fluentui/react-bindings/#readme-usage-1)
    -   [`useStateManager()`](https://npmcn.com/package/%40fluentui/react-bindings/#readme-usestatemanager)
        -   [使用量](https://npmcn.com/package/%40fluentui/react-bindings/#readme-usage-2)
        -   [参考文献](https://npmcn.com/package/%40fluentui/react-bindings/#readme-reference)
    -   [`useStyles()`](https://npmcn.com/package/%40fluentui/react-bindings/#readme-usestyles)
        -   [使用量](https://npmcn.com/package/%40fluentui/react-bindings/#readme-usage-3)
        -   [参考文献](https://npmcn.com/package/%40fluentui/react-bindings/#readme-reference-1)
    -   [`useUnhandledProps()`](https://npmcn.com/package/%40fluentui/react-bindings/#readme-useunhandledprops)
        -   [使用量](https://npmcn.com/package/%40fluentui/react-bindings/#readme-usage-4)
        -   [参考文献](https://npmcn.com/package/%40fluentui/react-bindings/#readme-reference-2)

# 安装

**国家预防机制**

```bash
npm install --save @fluentui/react-bindings
```

**雅伦**

```bash
yarn add @fluentui/react-bindings
```

# 钩子

## `useAccesibility()`

反应钩为无障碍行为提供绑定.

#### 使用量

下面的例子假设一个叫做 `<Image>` 将以此方式使用:

```tsx
const imageBehavior: Accessibility<{ disabled: boolean }> = props => ({
  attributes: {
    root: {
      'aria-disabled': props.disabled,
      tabIndex: -1,
    },
    img: {
      role: 'presentation',
    },
  },
  keyActions: {
    root: {
      click: {
        keyCombinations: [{ keyCode: 13 /* equals Enter */ }],
      },
    },
  },
});

type ImageProps = {
  disabled?: boolean;
  onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
  src: string;
};

const Image: React.FC<ImageProps> = props => {
  const { disabled, onClick, src, ...rest } = props;
  const getA11Props = useAccessibility(imageBehavior, {
    mapPropsToBehavior: () => ({
      disabled,
    }),
    actionHandlers: {
      click: (e: React.KeyboardEvent<HTMLDivElement>) => {
        if (onClick) onClick(e);
      },
    },
  });

  return (
    <div {...getA11Props('root', { onClick, ...rest })}>
      <img {...getA11Props('img', { src })} />
    </div>
  );
};
```

## `useStyles()`

一个反应钩子,为用法CSSinJS风格和流畅的取材提供绑定.

### 使用量

下面的例子假设一个叫做 `<Text>` 将以此方式使用:

```tsx
type TextComponentProps = {
  className?: string;
  color?: string;
};

const Text: React.FunctionComponent<TextComponentProps> = props => {
  const { className, children, color } = props;

  const { classes } = useStyles('Text', {
    className: 'ui-text',
    mapPropsToStyles: () => ({ color }),
  });

  return <span className={classes.root}>{children}</span>;
};
```

### 参考文献

```tsx
const { classes } = useStyles(
  displayName: string,
  options: UseStylesOptions<Props>,
)
```

-   `displayName` - 在主题中查找的组件名称
-   `options.className` - 可选的,特殊类名,将永远添加到 `root` 插槽
-   `options.mapPropsToStyles` - 可选的,将传递样式功能的一套道具,只允许原始的
-   `options.rtl` - 可选,设置RTL模式

## `useUnhandledProps()`

一个反应钩子,它返回一个超出组件范围的由道具组成的对象. 用于从用户获取和传播未知道具.

### 使用量

下面的例子假设一个叫做 `<Text>` 将以此方式使用:

```tsx
type TextComponentProps = React.HTMLAttributes<HTMLSpanElement> * {
  className?: string;
};

const Text: React.FunctionComponent<TextComponentProps> = props => {
  const { className, children } = props;
  const unhandledProps = useUnhandledProps(['className'], props);

  return <span {...unhandledProps} className={classes.root}>{children}</span>;
};
```

### 参考文献

```tsx
const unhandledProps = useUnhandledProps(handledProps, props);
```

-   `unhandledProps` - 按部件分列的无手取道具物体
-   `handledProps` - 由处理过的道具名称组成的阵列
-   `props` - 将所有道具传递给组件的物体

## 常见问题

### @fluentui/react-bindings 是什么？

一套组件和钩子来构建组件库和UI工具包\.

### 如何安装 @fluentui/react-bindings？

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

### @fluentui/react-bindings 支持 TypeScript 吗？

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

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

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

### @fluentui/react-bindings 可以商用吗？

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

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

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

### @fluentui/react-bindings 还在维护吗？

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