# @bimetal/react 中文文档

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

版本：0\.42\.0
npm 元数据更新时间：2026-10-30T11:44:36.901Z
中文译文更新时间：2026-11-08T02:55:06.562Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：130 kB，75 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：13 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2026-04-29T12:19:27.704Z
- 最新版本发布：2026-10-30T11:44:36.722Z
- 近 30 天下载量：11245（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：34（近 12 个月 34 个）

## 中文简介

BIMETAL 组件家族的通用反应绑定:使用 Controll 原始 + 每个组件控制器一个钩. 没有日历的具体内容——日历回放适配器生活在@bimetal/calendar-react-组件中.

## 安装

```sh
npm install @bimetal/react
```

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

## README

# @ bimetal/ 反应

死亡( 死亡) **特别反应-宾东** (原始内容存档于2019-10-29) (英语). für die BIMETAL-Kombonenten-Familie. 死药夹 卡诺尼申主计长 `@bimetal/*-headless`\-Pakete)通过德姆反应-Eigenen Primitiv `useSyncExternalStore` (原始内容存档于2013-10-12). React ein-es enthält **金刚** eigene 互换日志 und **金刚** 卡伦德 -斯佩西菲克 耶稣 `if` lebt im Controller; 反应渲染为 nur den identitätsstabilen 快照 (原始内容存档于2018-10-12). und übersetzt DOM-Events in Intent-Aufrufe.

死亡( 死亡) **费尔蒂根** 页:1`<Calendar>`, (中文(简体) ), `<Kanban>`, (中文(简体) ), `<Table>`, (中文(简体) ), `<Gantt>`, (中文(简体) ), `<Whiteboard>`, (中文(简体) ), `<Tree>`, (中文(简体) ), `<List>`, (中文(简体) ), `<Picker>`, (中文(简体) ), `<FormBuilder>`编号 :`<FormRenderer>`潜入地穴 `@bimetal/<familie>-react-components`\- 帕克顿 死活活活活活活活活 (原始内容存档于2018-10-21) (英语). Newschen Hooks, per-Komponenten-Hooks, die Fokus-Trap, Test-Utilits) für eigene React-UIs.

## 安装

```bash
npm install @bimetal/react @bimetal/<familie>-headless @bimetal/<familie>-data
# z. B.  @bimetal/react @bimetal/kanban-headless @bimetal/kanban-data
```

## 戴斯·帕克特的谎言

| 导出 | 兹韦克 |
| --- | --- |
| `useController(factory, options)` | Dasitalche Primitiv: erzeugt einen Controller (stabil über die store-Identität) 透過相關相關地點取出相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相 `useSyncExternalStore`吉布特语 `[snapshot, controller]` z克. |
| `useKanbanController`, (中文(简体) ), `useTableController`, (中文(简体) ), `useGanttController`, (中文(简体) ), `useWhiteboardController`, (中文(简体) ), `useTreeController`, (中文(简体) ), `useListController`, (中文(简体) ), `usePickerController`, (中文(简体) ), `useToastController`, (中文(简体) ), `useOverlayController`, (中文(简体) ), `useFormBuilderController`, (中文(简体) ), `useFormRendererController` | (原始内容存档于2012-10-12). Vorkonfigurierte Crapper um `useController` je Familie——在泽恩-戴蒂安的精灵虎克(英语:`useFormController.ts` liefert 构建器 _ưμ㼯a_ 发相者. |
| `useLiveOptions(options)` | 汉特死了 **回电** {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}艾内斯·厄泽格顿 控制员 莱本迪克 (原始内容存档于2018-03-31) (英语). Steckt bereits in allen Controller - Hooks und in `useFocusTrap`; serkt gebraucht wird er nur für ein (英语: _胶片_ 约束。 西贺 [选择一个 einen 控制器 durchreichen](https://npmcn.com/package/%40bimetal/react/#readme-options-an-einen-controller-durchreichen)。 。 。 . |
| `useConfigPush(ctrl, config)` 编号 : `useReactivePush(push, value, identity)` | (原始内容存档于2017-09-26). Reaktive Durchreichung einer option-Leitung (英语)`setConfig`, (中文(简体) ), `setRules`在einen laufenden控制器. |
| `useFocusTrap(ref, options)` | Fokus-Trap-Hook(电话-生活循环:输入-陷阱-出逃-恢复),收发-收发-um `@bimetal/a11y-dom`。 。 。 . `onEscape` (bimetal-179号). |
| `renderProbe` 编号 : `probeRender` | (原始内容存档于2018-10-22). Test-Utitities für Re-Render-Zählung. |

Die Controllers- Factories selbst (英语:`createKanbanController`, (中文(简体) ), `createTableController`, (中文(简体) ), `createGanttController`, (中文(简体) ), `createWhiteboardController`, (中文(简体) ), `createTreeController`, (中文(简体) ), `createListController`, (中文(简体) ), `createPickerController`, (中文(简体) ), `createFormBuilderController`编号 :`createFormRendererController`\+ ihre 类型 维基月球在线解说-德克萨斯环形山 `@bimetal/<familie>-headless`\- 派克顿再出口.

> 皮肤 **日历**\- 胡克(英语:`useCalendarController`(原始内容存档于2018-10-21) (英语). legt aus historischen Gründen serekt in `@bimetal/calendar-react-components`(原始内容存档于2017-03-26) (英语). nicht hier — Calendar war die Referentenz-Komponente vor dieer 特出宾都. Alle anderen Familien laufen über dies spaket. 中国植物物种信息数据库. 沙门罪孽深重 **兹沃尔夫** Captain-Hooks:精灵出道,出道于卡伦德-帕克特.

阿尔基特克图-赫特克伦德: [主计长-Konzept(无头无捆绑)](https://npmcn.com/apps/landing/src/content/docs/de/konzept-controller.md)。 。 。 .

## 再出口

祖尔·贝克姆利希凯特再出口 `@bimetal/react` 全部为 `@bimetal/temporal`苏打水会死 版式 -/再现 - Typen aus einem einzigen Paket 导入器 Werden können.

## 选择一个 einen 控制器 durchreichen

`setConfig` (单位:千美元) `setRules`编号 :`setCustomViews`(轻声) **结构设计师** Ein vertrag des)的配置 ein e-op—— das ist set bimetal-157 ein Vertrag des (中文(简体) ) _主计长_, (中文(简体) ), (原始内容存档于2018-10-21). nicht des React-Bindings. ein inline erzeugtes Objekt ist deshalb in jedem (英语:Ein indine erzeugtes Objekt ist deshalb in jedem) 互联网档案馆的存檔,存档日期2014-12-22. 互联网档案馆的存檔,存档日期2013-12-21. 互联网档案馆的存檔,存档日期2014-12-22 伦德-莱尔·恩贝登克利希:

```tsx
// Genau so gedacht: das Inline-Objekt ist bei jedem Render neu; der Controller
// erkennt die strukturelle Gleichheit und löst keinen Zustandswechsel aus.
const [snapshot, ctrl] = useTableController({
  store,
  config: { columns: COLUMNS, rowHeight: 36 },
});
```

(ein Captain, den BIMETAL nicht selbst anbietet) (中文(简体) ) durchreichung einzeln): 死后

```tsx
import { useConfigPush, useReactivePush } from '@bimetal/react';

useConfigPush(ctrl, config);                       // ctrl.setConfig, reaktiv
useReactivePush(v => ctrl.setRules(v), rules, ctrl);   // beliebiger Setter
```

**Eine Grenze, 死男人Kennen Musss: \\ N** 维尔特,每条死活 _身份证明_ (原始内容存档于2018-09-26) (英语). vergleichen Lassen-eine infine definierte Funktion (英语)`nodeMeta`),ein frisches (英语) `Date`, ein per Factory gebautes Regel-Objekt – sind bei jedem Render nu und 出产的精子 : (原始内容存档于2018-10-21). Gelten damit als Änderung. (原始内容存档于2013-10-12). Memoisiere sie (英语)`useMemo`摩多尔 - 康斯坦特 皮肤 (原始内容存档于2018-03-21) (英语). Captain sich in der Entwicklung von selbst, wenn er eine solche Instabilitäts-Signatur sieht——mit dem Namen der betroffen Leitung. 中国植物物种信息数据库.

### 召回:死是安维森海特是费斯德格莱特山,死是伊登特特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特克特

Ein 控制器宽度 **脑炎** erzeugt (英语:`useController` 回忆录 auf `[store, id]`(原始内容存档于2013-10-12). und destrukturiert seine Callbacks im Konstruktor. 欧恩 关闭 **质地** 轻轻地燃烧 festgenagelt - 小丑主机,德森 `onSubmit` 弗来森州立法院(der) (原始内容存档于2018-10-25). React). schickte gegen den Stand vom Mount ab. 尽管如此,普劳西贝尔·德·法尔施.

`useLiveOptions` ö un **备忘** 控制器 - Hooks 死亡 Pakets (sowie) `useFocusTrap` ưμ㼯a `useCalendarController`法伦·贝里特斯·达吕伯。 韦特拉格:

```tsx
// Jeder Render darf einen frischen Handler übergeben — die Geste erreicht IMMER
// den zuletzt übergebenen. Kein useCallback nötig, kein Controller-Neubau.
const [snapshot, ctrl] = useFormRendererController({
  store, formId,
  onSubmit: values => save(values, draftFromState),   // liest frischen State
});
```

|  | 维哈尔滕 |
| --- | --- |
| 召回 Beim Mount vorhanden, später 时 **获取** | 奥弗鲁夫·厄雷克特死 **中风** Funktion (英语). |
| 召回 Beim Mount vorhanden, später 时 **韦格吉诺曼人** (单位:千美元)`undefined`(中文(简体) ) | 奥弗鲁夫·厄雷克特死 **苏莱特·贝坎特** Funktion (英语). Anwesenheit beim Mount destrukturiert: er Kann einen Loader nicht nachträglich lernen, 也叫 darf er ach keinen verlieren —— 儿子们 `undefined` dort, wo der Kern eine Funktion erwartet (ein weggenommenes) (英语:Weggenommenes) 维基语录链接:名人名言 - 文学作品 - 谚语 - 谚语 - 谚语 - 谚语 `loadChildren` (原始内容存档于2018-10-21) (英语). intinderließ einen Baum mit ewigem Lade-Chevron, ohne Fehlermeldung. |
| 召回贝姆山 **单位** 沃尔汉登, 德克萨斯州 | **维尔昆斯洛斯** - 管制员戴帽子 `undefined` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我被吓坏了 Im Entwicklungsmodes wird das gemeldet, einmal je Feld je Hook-Instanz. (原始内容存档于2018-09-29) (英语). übergib den Callback ab dem ersten Render; ein sureiles No-op genügt. 维基语录链接:名人名言 - 文学作品 - 谚语 - 谚语. |
| **Ni**\- Funktions-Felder (英语:`options`, (中文(简体) ), `initialValues`, (中文(简体) ), `debounceMs`, (...) (中文(简体) ) | (原始内容存档于2018-10-12). Weiterhin auf den Mount-Wert festgelegt. Ihr Wirt wird 实习生 aufgefrischt, damit ein nach einem (英语) `<Activity>`暂停 - 复活 **纳乌尔泽格特** (原始内容存档于2018-09-26) (英语). Captain nicht auf dem Mount-Stand einfriert-ein Reaktivitäts-Versprechen ist das ausdrücklich nicht. Wer sie zur Laufzeit änder will, nimt die required Setter des Controllers (美国联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦联邦`setOptions()`, (中文(简体) ), `setConfig()`) (中文(简体) ). |

**韦特莱通格伦岑** (heute nutzt kein 选项 - Typ eines davon; ein) (中文(简体) ) (原始内容存档于2013-10-12). künftiger darf daran nicht still brechen: die Weiterleitung ist eine gewöhnliche 费尔丰克通, es überlebt nur das _奥夫鲁夫-弗哈尔滕_. Eigenschaften a der (英语) 欢乐, `length`编号 :`name`, (中文(简体) ), `new`\-巴基特,死吧 -别这样 `this`\- Bindung,符号-斯克吕塞尔 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}不死 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}不死 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}不死 Ein 选项- Feld, das als Methode auf `this` (原始内容存档于2018-09-26). zugreift, muss gebunden übergeben werden.

弗尔·因 **胶片** 装订(ein Captain, den BIMETAL nicht selbst anbietet) : 装订(ein Captain, BIMETAL nicht selbst anbietet) : (原始内容存档于2018-06-25) (英语). lelt demofebe Reihenfolge wie in den Haus bindings-erst lebendig machen, Dann 尔祖根:

```tsx
import { useController, useLiveOptions, useConfigPush } from '@bimetal/react';

const live = useLiveOptions(options);                       // Callbacks lebendig
const [snapshot, ctrl] = useController(() => createMyController(live), [options.store]);
useConfigPush(ctrl, options.config);
```

## 常见问题

### @bimetal/react 是什么？

BIMETAL 组件家族的通用反应绑定:使用 Controll 原始 \+ 每个组件控制器一个钩\. 没有日历的具体内容——日历回放适配器生活在@bimetal/calendar-react-组件中\.

### 如何安装 @bimetal/react？

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

### @bimetal/react 支持 TypeScript 吗？

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

### @bimetal/react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @bimetal/react 可以商用吗？

@bimetal/react 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

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

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

### @bimetal/react 还在维护吗？

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