使用 Algolia React Instantsearch 显示网格结果答案

【问题标题】：Display Grid results with Algolia React Instantsearch使用 Algolia React Instantsearch 显示网格结果
【发布时间】：2017-11-26 23:14:56
【问题描述】：

我有这个 InstantSearch 的工作演示，但我找不到将结果显示为网格而不是列表的方式。

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

Product 是一张带有结果信息的卡片。我似乎能够访问结果列表的唯一方法是使用 Hits，但这不允许我创建网格。

欢迎任何帮助。

【问题讨论】：

标签： reactjs algolia react-instantsearch

【解决方案1】：

您可以使用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

【讨论】：

【解决方案2】：

感谢@Marie

我就是这样做的，而且效果很好。

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);

【讨论】：