1

最近我开始在我的网站上使用 Appbase.io 的 Reactivesearch 和 Reactivemaps 来搜索我的项目数据库并呈现它们等等。大多数组件都可以正常工作，有些组件有小错误。所以最近我将我的组件移动到它自己的组件中，然后将它放在我的导航栏上以供全球访问。然后我遇到的问题是“如何使用我的搜索值路由回我的 /explore 页面？”。显然它没有我想的那么简单。

我使用函数 toPath 设置我的搜索页面，该函数采用路径和来自 onValueSelected 的值

  toPath(path, obj) {
    this.props.history.push(`${path}?q="${obj.term}"`);
    console.log('SearchVal: ',obj)
  }

请注意，添加 term 是因为它的 object.term 和 term 是您搜索的字符串。

所以我尝试了这个，我URLParams={true}设置了我<ReactiveGoogleMap/> 的<CategorySearch/>值，然后我选择了我的值，它把我带到 /explore 页面，但我的地图以弹性数据库的项目 0 为中心。

我尝试了其他一些方法，只传递对象，删除 URLParams 等等。似乎没有任何效果。

如果有人知道如何实现这一点，我将不胜感激，这只是一个小问题，但仍然是一个问题，并且文档缺乏如何做到这一点/任何公众示例。

这是当前的配置：

toPath(path, obj) {
   this.props.history.push(`${path}?q="${obj.term}"`);
   console.log('SearchVal: ',obj)
}

<CategorySearch
    className="searchbar"
    dataField={["restaurantName"]}
    categoryField="city.keyword"
    placeholder='Let's Search"'
    componentId="q"
    URLParams={true}
    ...

<ReactiveGoogleMap
   componentId="map"
   dataField="location"
   stream={true}
   defaultZoom={13}
   pagination
   autoCenter={false}
   onPageChange={() => {
     window.scrollTo(0, 0);
   }}
   style={{

   }}
   onPopoverClick={this.onPopoverClick}
   className="rightCol"
   showMarkerClusters={false}
   showSearchAsMove={false}
   searchAsMove={true}
   //this.props.location.state.reactive_s
   //The old way I passed the object I used this ^
   react={{
    and: [
     "q"
    ],
   }}

另外作为旁注，我不确定是否有其他人得到这个，但我从@emotion 得到这些持续的问题，它是 Reactivesearch 的问题

serialize.browser.cjs.js:149 Functions that are interpolated in css calls will be stringified.
If you want to have a css call based on props, create a function that returns a css call like this
let dynamicStyle = (props) => css`color: ${props.color}`
It can be called directly with props or interpolated in a styled call like this
let SomeComponent = styled('div')`${dynamicStyle}`

这也是响应式搜索的一个问题，并且很难工作，因为如果不隐藏其他所有内容，您就无法完全隐藏它。每次单击和滚动具有反应性组件的页面时都会发生这种情况。仅在开发分支上，从不在编译版本上。

4

0 回答 0