如何使用 React class 组件创建 algolia 自动完成自定义渲染器

Question

我对 Algolia 自动完成很感兴趣，我正在尝试使用 class 组件复制他们的自定义渲染器以做出反应。这是使用功能组件自定义渲染器的最小演示sandbox，

这是我尝试将其转换为 class 组件的尝试。

import { createAutocomplete } from "@algolia/autocomplete-core";
import { getAlgoliaResults } from "@algolia/autocomplete-preset-algolia";
import algoliasearch from "algoliasearch/lite";
import React from "react";

const searchClient = algoliasearch(
  "latency",
  "6be0576ff61c053d5f9a3225e2a90f76"
);
// let autocomplete;
class AutocompleteClass extends React.PureComponent {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.autocomplete = null;
    this.state = {
      autocompleteState: {},
    };
  }

  componentDidMount() {
    if (!this.inputRef.current) {
      return undefined;
    }

    this.autocomplete = createAutocomplete({
      onStateChange({ state }) {
        // (2) Synchronize the Autocomplete state with the React state.
        this.setState({ autocompleteState: state });
      },
      getSources() {
        return [
          {
            sourceId: "products",
            getItems({ query }) {
              return getAlgoliaResults({
                searchClient,
                queries: [
                  {
                    indexName: "instant_search",
                    query,
                    params: {
                      hitsPerPage: 5,
                      highlightPreTag: "<mark>",
                      highlightPostTag: "</mark>",
                    },
                  },
                ],
              });
            },
            getItemUrl({ item }) {
              return item.url;
            },
          },
        ];
      },
    });
  }

  render() {
    const { autocompleteState } = this.state;
    return (
      <div className="aa-Autocomplete" {...this.autocomplete?.getRootProps({})}>
        <form
          className="aa-Form"
          {...this.autocomplete?.getFormProps({
            inputElement: this.inputRef.current,
          })}
        >
          <div className="aa-InputWrapperPrefix">
            <label
              className="aa-Label"
              {...this.autocomplete?.getLabelProps({})}
            >
              Search
            </label>
          </div>
          <div className="aa-InputWrapper">
            <input
              className="aa-Input"
              ref={this.inputRef}
              {...this.autocomplete?.getInputProps({})}
            />componentDidUpdate()
          </div>
        </form>
        <div className="aa-Panel" {...this.autocomplete?.getPanelProps({})}>
          {autocompleteState.isOpen &&
            autocompleteState.collections.map((collection, index) => {
              const { source, items } = collection;

              return (
                <div key={`source-${index}`} className="aa-Source">
                  {items.length > 0 && (
                    <ul
                      className="aa-List"
                      {...this.autocomplete?.getListProps()}
                    >
                      {items.map((item) => (
                        <li
                          key={item.objectID}
                          className="aa-Item"
                          {...this.autocomplete?.getItemProps({
                            item,
                            source,
                          })}
                        >
                          {item.name}
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              );
            })}
        </div>
      </div>
    );
  }
}

export default AutocompleteClass;

和相同版本的sandbox，我也试过使用componentDidUpdate()但是没有运气，任何我做错的地方将不胜感激谢谢:)

Answer 1

好的，不知道为什么你需要把它做成 class 组件，但你可以：

import { createAutocomplete } from "@algolia/autocomplete-core";
import { getAlgoliaResults } from "@algolia/autocomplete-preset-algolia";
import algoliasearch from "algoliasearch/lite";
import React from "react";

const searchClient = algoliasearch(
  "latency",
  "6be0576ff61c053d5f9a3225e2a90f76"
);
// let autocomplete;
class AutocompleteClass extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      autocompleteState: {},
      query: '',
    };
    this.autocomplete = createAutocomplete({
      onStateChange: this.onChange,
      getSources() {
        return [
          {
            sourceId: "products",
            getItems({ query }) {
              console.log('getting query', query)
              return getAlgoliaResults({
                searchClient,
                queries: [
                  {
                    indexName: "instant_search",
                    query,
                    params: {
                      hitsPerPage: 5,
                      highlightPreTag: "<mark>",
                      highlightPostTag: "</mark>"
                    }
                  }
                ]
              });
            },
            getItemUrl({ item }) {
              return item.url;
            }
          }
        ];
      }
    });
  }

  onChange = ({ state }) => {
    console.log(state)
    this.setState({ autocompleteState: state, query: state.query });
  }

  render() {
    const { autocompleteState } = this.state;
    return (
      <div className="aa-Autocomplete" {...this.autocomplete?.getRootProps({})}>
        <form
          className="aa-Form"
          {...this.autocomplete?.getFormProps({
            inputElement: this.state.query
          })}
        >
          <div className="aa-InputWrapperPrefix">
            <label
              className="aa-Label"
              {...this.autocomplete?.getLabelProps({})}
            >
              Search
            </label>
          </div>
          <div className="aa-InputWrapper">
            <input
              className="aa-Input"
              value={this.state.query}
              {...this.autocomplete?.getInputProps({})}
            />
          </div>
        </form>
        <div className="aa-Panel" {...this.autocomplete?.getPanelProps({})}>
          {autocompleteState.isOpen &&
            autocompleteState.collections.map((collection, index) => {
              const { source, items } = collection;

              return (
                <div key={`source-${index}`} className="aa-Source">
                  {items.length > 0 && (
                    <ul
                      className="aa-List"
                      {...this.autocomplete?.getListProps()}
                    >
                      {items.map((item) => (
                        <li
                          key={item.objectID}
                          className="aa-Item"
                          {...this.autocomplete?.getItemProps({
                            item,
                            source
                          })}
                        >
                          {item.name}
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              );
            })}
        </div>
      </div>
    );
  }
}

export default AutocompleteClass;

无论如何，componentDidMount 只被调用一次，并且由于 ref 对象未定义，它只是从中返回。在 class 组件中乱用 this 也是一个非常糟糕的主意（这就是为什么推荐 func 组件）

如何使用 React class 组件创建 algolia 自动完成自定义渲染器

How to create algolia autocomplete custom renderer using react class component

javascript

reactjs

algolia