# @appbaseio/reactivesearch 中文文档 规范地址：https://npmcn.com/package/%40appbaseio/reactivesearch/ 版本：4\.3\.1 npm 元数据更新时间：2026-07-26T02:14:47.377Z 中文译文更新时间：2026-11-06T11:18:22.177Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40appbaseio/reactivesearch 原文对照：https://npmcn.com/package/%40appbaseio/reactivesearch/?lang=original 项目主页：https://github.com/appbaseio/reactivesearch#readme 源码仓库：https://github.com/appbaseio/reactivesearch ## 关键信息（来自 npm 元数据） - 包体积（解压后）：5.1 MB，156 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：22 个 - peer 依赖：react \>=15，react-dom \>=15 - 首次发布：2017-03-03T15:07:35.369Z - 最新版本发布：2026-07-26T02:14:47.161Z - 近 30 天下载量：20331（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：449（近 12 个月 1 个） ## 中文简介 用于构建搜索体验的 Resact UI 组件库 ## 安装 ```sh npm install @appbaseio/reactivesearch ``` 也可以使用：`pnpm add @appbaseio/reactivesearch`、`yarn add @appbaseio/reactivesearch`、`bun add @appbaseio/reactivesearch` ## README ## ![reactivesearch](https://i.imgur.com/iiR9wAs.png "reactivesearch") 反应搜索 React 的弹性搜索 UI 组件 . [网址](https://opensource.appbase.io/reactivesearch/) [读取如何用反活性搜索构建 Airbnb 克隆](https://scotch.io/tutorials/build-an-airbnb-clone-with-react-and-elasticsearch)。 。 。 . * * * [![npm version](https://badge.fury.io/js/%40appbaseio%2Freactivesearch.svg)](https://badge.fury.io/js/%40appbaseio%2Freactivesearch) [![](https://img.shields.io/badge/license-Apache%202-blue.svg)](https://github.com/appbaseio/mirage/blob/dev/LICENSE.md) [![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/appbaseio/reactivesearch) [![npm](https://img.shields.io/npm/dt/@appbaseio/reactivesearch.svg)](https://www.npmjs.com/package/@appbaseio/reactivesearch) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/appbaseio/reactivesearch/blob/dev/.github/CONTRIBUTING.md) 反应用于弹性搜索的UI组件. ![Banner Image showing all the UI components we offer](https://i.imgur.com/bJ1QKZS.png) [获取我们设计师的草图模板](https://opensource.appbase.io/reactivesearch/resources/ReactiveSearch_Playground.sketch)。 。 。 . ## 安装 ``` yarn add @appbaseio/reactivesearch ``` ## 概念 图书馆的概念分为两部分: **1\. 传感器组件** 每个传感器组件都是为了在数据上应用特定过滤器而设计的。 例如: 根据可用的数据集编译一个无线电UI元素列表 - [单列表](https://opensource.appbase.io/reactive-manual/list-components/singlelist.html) **2\. 精算器组件** 起动器代表结果 UI 视图组件. ReactiveSearch主要配有两个起动器: `ResultCard` 财务报告和审定财务报表 `ResultList`。 。 。 . 结果Card在卡片界面中显示结果,而结果List则在列表中显示结果. 两者都为pagination和无限滚动视图提供内置支持. 除此之外,库还提供低等活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活. ## 现场演示 由真实世界的应用程序所启发的一组活地演示,由ReactiveSearch所建. - [演示/飞机床](https://opensource.appbase.io/reactivesearch/demos/airbeds/) - 类似空气bnb的预订搜索经验. - [演示/技术新闻](https://opensource.appbase.io/reactivesearch/demos/technews/) - 黑客新闻数据集的全文搜索应用程序. - [演示/图像](https://opensource.appbase.io/reactivesearch/demos/gitxplore/) - 探索所有流行的Github仓库. - [演示/产品搜索](https://opensource.appbase.io/reactivesearch/demos/producthunt/) - 根据小型产品猎取数据集过滤出的产品饲料. - [演示/书本搜索](https://opensource.appbase.io/reactivesearch/demos/goodbooks/) - 一个基于好书数据集的图书搜索应用程序. - [示范/电子商务](https://opensource.appbase.io/reactivesearch/demos/ecommerce/) - 一个电子商务汽车商店的应用程序. ## 文档 图书馆的官方文件在 [https://opensource.appbase.io/反应-手动](https://opensource.appbase.io/reactive-manual)。 。 。 . 构成部分分为四个部分: - 一般 UI 组件在 [被动-手动/基地构成部分](https://opensource.appbase.io/reactive-manual/base-components/selectedfilters.html)。 。 。 . - 基于列表的 UI 组件位于 [反应-手工/清单-构成部分](https://opensource.appbase.io/reactive-manual/list-components/singlelist.html)。 。 。 . - 以区域为基础的 UI 组件处于 [反应-手动/远程组件](https://opensource.appbase.io/reactive-manual/range-components/singlerange.html)。 。 。 . - 搜索 UI 组件在 [反应-手动/搜索-组件](https://opensource.appbase.io/reactive-manual/search-components/datasearch.html)。 。 。 . - 结果组件在 [被动-手工/成果-构成部分](https://opensource.appbase.io/reactive-manual/result-components/resultlist.html)。 。 。 . ## 更改日志 看看这个 [更改日志](https://npmcn.com/package/%40appbaseio/reactivesearch/CHANGELOG.md) 需要更多信息. ## 相关工具和项目 - [**反应搜索板**](https://dashboard.appbase.io/reactivesearch/) 您的反活性搜索相关应用程序( 通过交互式教程创建, 由他人共享等) 可以从这里访问 . - [**反应映射**](https://github.com/appbaseio/reactivemaps) 是一个类似 Reactive Search 的工程,可以轻松构建实时地图. - [**应用程序js**](https://github.com/appbaseio/appbase-js) 虽然构建搜索 UI 具有反活性搜索的可达性,但您可能需要添加一些输入窗体 . **应用程序js** 在那里有帮助. - [**脱口而出**](https://github.com/appbaseio/dejavu) 允许在 appbase.io (或 Elasticsearch) app 内查看原始数据. **即将发布功能 :** 能够从 CSV 和 JSON 文件导入自定义数据,同时在应用数据映射上进行有指引的行走. - [**幻觉**](https://github.com/appbaseio/mirage) 反应Search组件可以使用自定义的弹性搜索查询来扩展. 对于这些新到"弹性搜索"(Elasticsearch),幻影提供了一种直观的图形界面来编译查询. [![](https://i.imgur.com/UL6B0uE.png)](https://appbase.io/support/) ## 常见问题 ### @appbaseio/reactivesearch 是什么？ 用于构建搜索体验的 Resact UI 组件库 ### 如何安装 @appbaseio/reactivesearch？ 在项目目录运行 npm install @appbaseio/reactivesearch，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=15）、react-dom（\>=15）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @appbaseio/reactivesearch 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @appbaseio/reactivesearch 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @appbaseio/reactivesearch 可以商用吗？ @appbaseio/reactivesearch 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @appbaseio/reactivesearch 的下载量有多少？ 根据 npm 官方下载统计，@appbaseio/reactivesearch 在 2026/10/07 – 2026/11/05 这 30 天内被下载 20,331 次，日均约 678 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @appbaseio/reactivesearch 还在维护吗？ 最新版本 4\.3\.1 发布于 2026/07/26（3 个月前）；至今共发布 449 个版本，其中过去 12 个月发布了 1 个；首次发布于 2017/03/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。