如何使用ReactiveBase有条件地呈现搜索结果

npm install @appbaseio/reactivesearch

yarn add @appbaseio/reactivesearch

import { ReactiveBase } from '@appbaseio/reactivesearch';

ReactDOM.render(
  <ReactiveBase
    app="your_search_app"
    credentials="your_credentials"
    url="https://your_search_engine_url"
  >
    <App />
  </ReactiveBase>,
  document.getElementById('root')
);

import { DataSearch, ReactiveList } from '@appbaseio/reactivesearch';

const SearchComponent = () => (
  <div>
    <DataSearch
      componentId="searchComponent"
      dataField={['title', 'description']}
      placeholder="Search..."
    />
    <ReactiveList
      componentId="resultComponent"
      dataField="title"
      size={10}
      renderItem={(res) => <div>{res.title}</div>}
    />
  </div>
);

import { RangeSlider, MultiList } from '@appbaseio/reactivesearch';

const SearchComponent = () => (
  <div>
    <DataSearch
      componentId="searchComponent"
      dataField={['title', 'description']}
      placeholder="Search..."
    />
    <RangeSlider
      componentId="priceFilter"
      dataField="price"
      range={{
        start: 0,
        end: 1000
      }}
    />
    <MultiList
      componentId="categoryFilter"
      dataField="category"
    />
    <ReactiveList
      componentId="resultComponent"
      dataField="title"
      size={10}
      renderItem={(res) => <div>{res.title}</div>}
    />
  </div>
);