如何为 Algolia React 即时搜索输入自定义小部件？

Question

我正在尝试正确输入来自 algolia 即时搜索的连接点击列表。

我的自定义点击组件：

type Props = { hits: User[]; onSelectUser: (user: User) => void };

const SearchResults: React.FC<Props> = ({ hits, onSelectUser }) => {
  return hits.map((hit: User) => (
    <UserCard user={hit} onSelectUser={onSelectUser} />
  ));
};

export default connectHits<Props>(SearchResults);

当我尝试使用该组件时：

<Hits hitComponent={() => (<SearchResults onSelectUser={setSelectedUser} />)}/>

我收到一个 TS 错误，指出该组件上不存在 onSelectUser...当我忽略此 TS 错误时，我看到这些 props 在 SearchResults 组件中可用。

我应该如何正确键入我的组件以确保键入仍然正常工作？

Answer 1

您可以HitsProvided扩展react-instantsearch-core.

import { HitsProvided } from "react-instantsearch-core";

// ...

type Props = HitsProvided<UserRecord> & {
  onSelectUser: (user: User) => void;
};

const SearchResults: React.FC<Props> = ({ hits, onSelectUser }) => {
  return hits.map((hit: User) => (
    <UserCard user={hit} onSelectUser={onSelectUser} />
  ));
};

export default connectHits<Props, UserRecord>(SearchResults);

UserRecord将描述记录的形状（不是 API 返回的命中的形状，仅是属性）。