Algolia Reactインスタント検索でグリッド結果を表示

Question

私はこのInstantSearchのデモを行っていますが、リストではなくグリッドとして結果を表示する方法を見つけることができません。

<InstantSearch 
       appId="xxxxx" 
       apiKey="xxxxxx" 
       indexName="xxxx" 
      > 
      <SearchBox /> 
      <div> 
       <Hits hitComponent={Product} /> 
      </div> 
    </InstantSearch> 

そして、製品は結果情報を持つカードです。結果のリストにアクセスできるように見える唯一の方法は、ヒットですが、それでグリッドを作成することはできません。

助けを歓迎します。

Answer 1

connectHitsコネクタを使用して、独自のマークアップを使用できます。

コネクタは高次コンポーネントです。

はここで少し例を示します：ここコネクターについて

const Hits = connectHits(({hits}) => { 
 
    const items = hits.map(hit => <div>{hit.name}</div>); 
 
    return <Grid><items></Grid> 
 
});

詳細情報：@Marie

からhttps://community.algolia.com/react-instantsearch/guide/Connectors.html

Answer 2

おかげでこれは私がそれをやった方法ですと、できます。

import React from 'react'; 

//Import Components 
import {connectHits} from 'react-instantsearch/connectors'; 
import Product from './Product' 

const MyHits = (props) => { 
    const items = props.hits.map(hit => <Product hit={hit} />); 
    return (
     <div> 
      <div className="my-grid mdc-layout-grid"> 
       <div className="mdc-layout-grid__inner"> 
        {items} 
       </div> 
      </div> 
     </div> 
    ); 
} 


export default connectHits(MyHits);