如何使Algolia Hit组件适配三列Grid布局（Next.js）

问题根源在于Algolia的<Hits>组件默认会生成一个根容器div，你当前把Grid类加在了这个容器的外层div上，导致Grid布局的直接子元素是Hits的根容器，而非每个Hit项，所以无法实现预期的多列布局。

以下是两种可行的解决方法：

方法一：给Hits组件添加Grid类名 #

利用react-instantsearch提供的classNames属性，将Grid布局类直接绑定到Hits组件的根容器上，让每个Hit项成为Grid的直接子元素：

<InstantSearch
  searchClient={searchClient}
  indexName="propostas"
  onStateChange={onStateChange}
>
  <SearchBox />
  <Hits 
    hitComponent={Hit} 
    classNames={{
      root: "mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
    }}
  />
</InstantSearch>

方法二：自定义Hits渲染逻辑 #

使用useHits钩子手动获取搜索结果数组，按照你之前的方式遍历渲染，完全复用原有的布局逻辑：

import { useHits } from 'react-instantsearch-hooks-web';

// 自定义Hits网格组件
const HitsGrid = () => {
  const { hits } = useHits();
  
  return (
    <div className="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
      {hits.map(hit => (
        <Hit key={hit.id} hit={hit} />
      ))}
    </div>
  );
};

// 在InstantSearch中使用自定义组件
<InstantSearch
  searchClient={searchClient}
  indexName="propostas"
  onStateChange={onStateChange}
>
  <SearchBox />
  <HitsGrid />
</InstantSearch>

两种方法都能让每个Hit项成为Grid布局的直接子元素，从而实现和之前一致的响应式三列布局。

内容的提问来源于stack exchange，提问作者Pedro Souza