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

【问题标题】：How to type custom widget for Algolia React instant search?如何为 Algolia React 即时搜索键入自定义小部件？
【发布时间】：2020-11-26 11:34:01
【问题描述】：

我正在尝试正确键入来自 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 错误时，我看到道具在 SearchResults 组件中可用。

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

【问题讨论】：

标签： reactjs typescript algolia react-instantsearch

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

【讨论】：