前言
在现代 web 应用程序开发中，前端中的组件库和包管理工具是非常重要的，这也是为什么 NPM 包被越来越多地使用的一个原因。今天我们将讨论一个叫做 @appbaseio/reactivesearch 的 NPM 包。@appbaseio/reactivesearch 是一个强大的用于构建实时搜索和筛选界面的 React 组件库，其设计目标之一是开发者友好和易于使用，同时也提供了许多定制化和可扩展的选项。
安装
要使用 @appbaseio/reactivesearch，首先需要将其添加到项目中。从命令行或终端中，进入您的项目根目录，然后执行以下命令：
npm install @appbaseio/reactivesearch
使用
要使用 @appbaseio/reactivesearch，您需要将其作为依赖添加到您的 React 组件中，然后将它的 UI 组件添加到你的渲染树中。在本教程中，我们使用 Typescript 和函数式组件进行开发，但您可以使用您自己的选择来实现功能。
初始化搜索组件
首先，我们将导入我们需要的包并初始化 Reactivesearch 组件：
-- -------------------- ---- -------
---------------------------
------ ------ - -------- - ---- --------
------ - ------------- ---------- - ---- ----------------------------
----- ------ - -- -- -
----- ------- --------- - -------------
----- -------- - ------- ------- -- -
----------------
--
------ -
-------------
-------------
-----------------------------
-
-----------
-----------------------
-------------------- ---------------
------------------------
------------------- --- -------------
--
---------------
--
--
------ ------- -------在上述代码中，<reactivebase> 组件是所有其他 Reactivesearch 组件的容器，而 <datasearch> 组件提供了我们需要的搜索框。
显示搜索结果
现在我们可以提交查询并查看结果。这是一个简单的例子，我们将使用 <reactivelist> 组件将结果呈现出来：
-- -------------------- ---- -------
---------------------------
------ ------ - -------- - ---- --------
------ - ------------- ----------- ------------ - ---- ----------------------------
----- ------ - -- -- -
----- ------- --------- - -------------
----- -------- - ------- ------- -- -
----------------
--
------ -
-------------
-------------
-----------------------------
-
-----------
-----------------------
-------------------- ---------------
------------------------
------------------- --- -------------
--
-------------
---------------------
-----------------
---------
----------
--------
---- --------------
--
------------------ ---- ---- ---- -- -
---- ----------
---------------------
-------------------------
------
--
--
---------------
--
--
------ ------- -------本例中，我们使用了 <reactivelist> 组件呈现结果，并使用 renderItem 属性将每个结果转换为 HTML。注意如何使用 react 属性来与上游 <datasearch> 组件相连接（表示任何查询改变也应该改变结果）。
定义搜索结果
很明显，我们的结果处理方式是非常简陋的，我们需要更多操作。为了让您的用户更好地了解其搜索结果，您可以添加一些筛选，提供排序选项，添加分页等。@appbaseio/reactivesearch 提供了大量的选项和可定制化的组件以满足您的需求。
添加筛选组件
让我们添加一些筛选器，以便用户能够更精细地搜索他们的查询。为此，我们将使用一个 <multilist> 组件：
-- -------------------- ---- -------
---------------------------
------ ------ - -------- - ---- --------
------ - ------------- ----------- ------------- --------- - ---- ----------------------------
----- ------ - -- -- -
----- ------- --------- - -------------
----- -------- - ------- ------- -- -
----------------
--
------ -
-------------
-------------
-----------------------------
-
-----------
-----------------------
-------------------- ---------------
------------------------
------------------- --- -------------
--
----------
----------------------------
------------------------------
------------------
------------------- -- ---------
--
-------------
---------------------
-----------------
---------
----------
--------
---- ------------- ------------------
--
------------------ ---- ---- ---- -- -
---- ----------
---------------------
-------------------------
------
--
--
---------------
--
--
------ ------- -------在上述代码中，我们使用 <multilist> 组件添加了一个筛选器。使用 dataField 属性指定与其相关的 Elasticsearch 索引字段，并使用 title 属性指定其显示名称。此外，您可以使用 placeholder 属性定义占位符文本。
排序搜索结果
您还可以通过对结果进行排序来对搜索结果进行更精细的控制。要对结果进行排序，我们使用另一个组件—— <reactivesort>：
-- -------------------- ---- -------
---------------------------
------ ------ - -------- - ---- --------
------ - ------------- ----------- ------------- ---------- ------------ - ---- ----------------------------
----- ------ - -- -- -
----- ------- --------- - -------------
----- -------- - ------- ------- -- -
----------------
--
------ -
-------------
-------------
-----------------------------
-
-----------
-----------------------
-------------------- ---------------
------------------------
------------------- --- -------------
--
----------
----------------------------
------------------------------
------------------
------------------- -- ---------
--
-------------
------------------------
----------------------------
----------- ---
----------------
-
------ ------------
---------- ---------
------- -------
--
-
------ -------- ---- -------------
---------- -------------------
------- ------
--
-
------ -------- ---- --------------
---------- -------------------
------- -------
--
--
--
-------------
---------------------
-----------------
---------
----------
--------
---- ------------- ----------------- --------------
--
------------------ ---- ---- ---- -- -
---- ----------
---------------------
-------------------------
------
--
--
---------------
--
--
------ ------- -------在上述代码中，我们使用 <reactivesort> 组件来实现这个目的。您需要指定数据源中的数据字段，然后提供您想提供的排序选项。例如，默认情况下，我们按照“相关性”，“发布日期（上升）”和“发布日期（下降）”来排序。如果您的搜索结果涵盖了一段很长的时间，这个功能就会变得非常重要。
添加分页功能
最后，您还可能想添加分页功能，以防止加载大量数据而导致性能下降。为此，我们可以使用 <pagination> 组件。
-- -------------------- ---- -------
---------------------------
------ ------ - -------- - ---- --------
------ - ------------- ----------- ------------- ---------- ------------- ---------- - ---- ----------------------------
----- ------ - -- -- -
----- ------- --------- - -------------
----- -------- - ------- ------- -- -
----------------
--
------ -
-------------
-------------
-----------------------------
-
-----------
-----------------------
-------------------- ---------------
------------------------
------------------- --- -------------
--
----------
----------------------------
------------------------------
------------------
------------------- -- ---------
--
-------------
------------------------
----------------------------
----------- ---
----------------
-
------ ------------
---------- ---------
------- -------
--
-
------ -------- ---- -------------
---------- -------------------
------- ------
--
-
------ -------- ---- --------------
---------- -------------------
------- -------
--
--
--
-------------
---------------------
-----------------
---------
----------
--------
---- ------------- ----------------- --------------
--
------------------ ---- ---- ---- -- -
---- ----------
---------------------
-------------------------
------
--
--
-----------
------------------------
-----------------
---------
-----------
-------------
--
---------------
--
--
------ ------- -------我们完成了
现在，您已经了解了 @appbaseio/reactivesearch 的大部分功能并掌握了如何使用它们来构建实时搜索和筛选级别的 Web 界面。虽然本教程无法涵盖这个库的所有详细信息，但最好在将其用于生产时查看官方文档以获取更多帮助和解释。
上述示例代码已经可以在您的项目中使用。请确保替换必要的值以匹配您的数据源和应用程序。现在您可以运行您的应用程序并查看 Reactivesearch 奇妙的工作方式！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/appbaseio-reactivesearch