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

Question

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

我的自定义 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 错误时，我看到 Prop 在 SearchResults 组件中可用。

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

Answer 1

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

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