Таблица Algolia не отображается должным образом - PullRequest
Новая
       4

Таблица Algolia не отображается должным образом

0 голосов
/ 10 апреля 2019

Как настроить таблицу 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}>
...