Algolia

Question

我在 Algolia instantSearch 中找到了这个 menuSelect 小部件并且我成功实现了。但目前它显示的过滤器名称是直接来自索引配置的标签。有没有办法用我自己的过滤器替换这些名称？例如而不是 react_pwa，显示 React storefront 这是 html 输出。

<MenuSelect class="tags" attribute="tags" transformItems={items =>
            items.map(item => ({
            ...item,
          }))}/>

有谁知道我是否可以使用 transformItemsprops 来解决这个问题？谢谢！

Answer 1

构建一个自定义的 menuSelect 小部件就可以做到。

const MenuSelect = ({ items, currentRefinement, refine }) => (
  <select
    value={currentRefinement || ''}
    onChange={event => refine(event.currentTarget.value)}
  >
    <option value="">See all options</option>
    {items.map(item => (
      <option
        key={item.label}
        value={item.isRefined ? currentRefinement : item.value}
      >
        {item.label==="react_pwa" && 'React PWA Storefront'}
        {item.label==="cloudops-aws" && 'CloudOps for AWS'}
        {item.label==="commerce-manager" && 'Commerce Manager'}
        {item.label==="cloudops-azure" && 'CloudOps for Azure'}
        {item.label==="chatbot" && 'Reference Chatbot'}
        {item.label==="alexa-skill" && 'Alexa Skill'}
        {item.label==="account-management" && 'Account Management'}
      </option>
    ))}
  </select>
);

const CustomMenuSelect = connectMenu(MenuSelect);

然后在搜索中 class 添加 <CustomMenuSelect attribute="tags" />

Algolia - 如何在 menuSelect 下拉列表中自定义标签显示名称

Algolia - How to customize the tags display name in the menuSelect dropdown list

html

reactjs