reactjs - Algolia 表显示不正确

Question

如何设置 Bootstrap 表以正确显示 Algolia 搜索结果？

我试图将 Highlights 放入 tds，但编译器不知何故认为整个返回内容只是一个单元格，而不是行。这是 React 编译器的结果：

不正确的表格视图

import React, { Component } from "react";
    import algoliasearch from "algoliasearch/lite";
    import {
      InstantSearch,
      Highlight,
      Hits
    } from "react-instantsearch-dom";
    import PropTypes from "prop-types";
    import "./Algolia.css";
    import { Helmet } from "react-helmet";

    const searchClient = algoliasearch(
      'ZL7V6958NY',
      '6ccdb3835e97ced1dc5429d1f7c723a5'
    );

    const pageTitle = "Продавцы технической соли";

    class SaltDealers extends Component {
      render() {
        return (
          <div className="container">
            <Helmet>
              <title>{pageTitle}</title>
              <meta
                name="description"
                content={pageTitle}
              />
              <meta
                property="og:title"
                content={pageTitle}
              />
              <meta name="keywords" content="соль техническая, купить техническую соль, соль техническая +в мешках, соль техническая галит, соль техническая цена" />
            </Helmet>
            <div className="col-md-8 ml-auto mr-auto">
              <h1 className="title text-center">{pageTitle}</h1>
            </div>
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Company</th>
                  <th scope="col">Phone</th>
                  <th scope="col">Website</th>
                  <th scope="col">City</th>
                  <th scope="col">Amount</th>
                  <th scope="col">Type</th>
                </tr>
              </thead>
              <tbody>
                <InstantSearch indexName="salt_dealers" searchClient={searchClient}>
                  <Hits hitComponent={Hit} />
                </InstantSearch>
              </tbody>
            </table>       
          </div>
        );
      }
    }

    function Hit(props) {
      return (
        <tr>
          <th scope="row">
            <Highlight attribute="company" hit={props.hit} />
          </th>
          <td>
            <Highlight attribute="phone" hit={props.hit} />
          </td>
          <td>
            <Highlight attribute="website" hit={props.hit} />
          </td>
          <td>
            <Highlight attribute="city" hit={props.hit} />
          </td>
          <td>
            <Highlight attribute="amount" hit={props.hit} /> кг
          </td>
          <td>
            <Highlight attribute="type" hit={props.hit} />
          </td>
        </tr>
      );
    }

    Hit.propTypes = {
      hit: PropTypes.object.isRequired,
    };

    export default SaltDealers;

预期的结果是 JSX 中的一些小变化，也许我们需要一个键，但这种语法不知何故不起作用。

<tr key={ObjectID}>

标签： reactjsalgolia