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

Question

我正在尝试从 algolia 即时搜索中正确输入我连接的 Hits 列表。

我的自定义 Hits 组件：

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 错误时，我看到道具在 SearchResults 组件中可用。

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

Answer 1

您可以扩展 react-instantsearch-core 公开的 HitsProvided 接口。

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 返回的命中的形状，只有属性）。

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

How to type custom widget for Algolia React instant search?

typescript

reactjs

algolia

react-instantsearch