如何在 ResultCard 中显示搜索结果的详细信息页面？

Question

先决条件：React 应用程序使用 appbaseio/reactivesearch

问题：我试图在 same window 中打开一个简单的详细信息页面（例如，作为 弹出窗口 window 当我点击搜索结果时通过 onclick 处理程序触发）。搜索结果由 ResultCard 组件显示。有人遇到过类似的问题并解决了吗？

我看到 ResultCard 组件中有 url 参数（此处："profile"），但它只是重定向到另一个选项卡中指定的 url window .

import {ReactiveBase, DataSearch, ResultCard} from 
appbaseio/reactivesearch";

// ...some more code

<div className="container">
// connector to appbase.io
<ReactiveBase
  app="myapp"
  credentials="xxx"
  theme={{
    primaryColor: "#ffe067"
  }}
>
// search bar
<DataSearch
    componentId="SearchSensor"
    dataField={["gebot_name", "info"]}
    className="search"
/>
// display search results in a list with title and description
<ResultCard
    className="right-col"
    componentId="SearchResult"
    size={10}
    onData={data => ({
      title: data.gebot_name,
      description: data.description,
      url: "profile"
    })}
    react={{
      and: ["SearchSensor"]
    }}
/>
</ReactiveBase>
</div>

Answer 1

根据我从你的问题中了解到的情况，你希望在单击结果项时显示模态框并显示所有详细信息。

如果是这种情况，您可以使用 ReactiveList 并根据您的选择呈现数据。例如：

在v2中：

<ReactiveList
   ...
   onData={ res => (
        <div onClick={() => this.handleModal(res)} >{Content}</div>
     )
   }
/>

使用this.handleModal您可以处理模态框并显示数据。

在v3

<ReactiveList
   ...
   renderItem={ res => (
        <div onClick={() => this.handleModal(res)} >{Content}</div>
     )
   }
/>

在此处查看文档：

对于 v3：https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html

对于 v2：https://opensource.appbase.io/reactive-manual/v2/result-components/reactivelist.html

如何在 ResultCard 中显示搜索结果的详细信息页面？

How to display detail page from search results in ResultCard?

reactjs

reactivesearch