Отображение результатов сетки с помощью Algolia React Instantsearch

У меня есть рабочая демонстрация этого InstantSearch, но я не могу найти способ отображения результатов в виде сетки, а не списка.

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

А Product — это карточка с информацией о результате. Единственный способ, которым я могу получить доступ к списку результатов, — это Hits, но это не позволит мне создать сетку.

Любая помощь приветствуется.


reactjs algolia react-instantsearch
person Lancelot    schedule 23.06.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать соединитель connectHits, чтобы использовать собственную разметку.

Соединители являются компонентами более высокого порядка.

Вот небольшой пример:

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

Подробнее о соединителях здесь: https://community.algolia.com/react-instantsearch/guide/Connectors.html

person Marie    schedule 23.06.2017

arrow_upward
2
arrow_downward

Спасибо @Мари

Вот как я это сделал, и это работает.

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);
person Lancelot    schedule 23.06.2017