介绍
search-result-list-react 是一款基于 React 的搜索结果展示列表组件，可以很方便地使用该组件来实现搜索结果列表的展示。本文将详细介绍该组件的使用方法及参数。
安装
搜索结果展示列表组件的 npm 包名称为 search-result-list-react，可以通过 npm 来安装：
npm install search-result-list-react
使用
该组件提供了两种类型的数据源供使用，即对象类型的数据源和数组类型的数据源，下面我们将分别介绍使用这两种类型的数据源的方法。
使用对象类型的数据源
该组件提供了一个 SearchResultList 组件，使用该组件需要传入一个对象类型的数据源 data
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- ---------------------------
----- ---- - -
------ --
------ -
-
------ --------
------------ ----------
----- ---------------------------
--
-
------ --------
------------ ----------
----- ---------------------------
--
-
------ --------
------------ ----------
----- ---------------------------
--
--
--
----- ------- - -- -- -
------ ----------------- ----------- ---
--
------ ------- --------使用数组类型的数据源
该组件同样可以使用数组类型的数据源，只需要在传入 data 的时候将 items 内的对象转换为数组即可。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- ---------------------------
----- ---- - -
-
------ --------
------------ ----------
----- ---------------------------
--
-
------ --------
------------ ----------
----- ---------------------------
--
-
------ --------
------------ ----------
----- ---------------------------
--
--
----- ------- - -- -- -
------ ----------------- ------- ------ ----- ------ - -- ---
--
------ ------- --------参数
SearchResultList 组件内部封装了许多参数用于控制搜索结果列表的显示效果，下面介绍几个常用的参数：
| 参数 | 数据类型 | 必填 | 描述 |
|---|---|---|---|
| data | Object | 是 | 数据源，格式为 { items: [], total: number } |
| resultComponent | Element | 否 | 自定义搜索结果展示组件，接收一个 SearchResult 类型的 prop |
| description | String | 否 | 自定义搜索结果展示组件中展示搜索结果描述的字段名，默认为 "description" |
| title | String | 否 | 自定义搜索结果展示组件中展示搜索结果标题的字段名，默认为 "title" |
| link | String | 否 | 自定义搜索结果展示组件中展示搜索结果链接的字段名，默认为 "link" |
| className | String | 否 | 自定义搜索结果展示组件的样式名 |
| onResultClick | Function | 否 | 点击搜索结果项时触发的回调函数，接收一个 SearchResult 类型的参数 |
| hasBorder | Boolean | 否 | 是否展示列表项之间的分割线，默认为 true |
| borderClass | String | 否 | 分割线的样式类名，默认为 "search-result-list-react__item-list-item-border" |
| metaDescriptions | Object | 否 | 自定义 meta 信息的展示方式，格式为 { key: description }，其中 key 为 meta 的 key 值 |
以上是常用的一些参数，如果需要查看更多参数请查看官方文档。
结语
本文介绍了如何使用 search-result-list-react 这款搜索结果展示列表组件，并详细介绍了该组件所提供的常用参数和使用方法。希望能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609d81e8991b448ded95