在带有条件（用于过滤目的）的 React 组件中，将 Spinner 放在哪里？

Question

我正在使用 Giphy API 并且有一个可以搜索 gif 的可用应用程序。我的 SearchResults 组件中有条件，以便用户可以过滤搜索结果（例如 Rated G、Rated PG 等）。但是每个 gif 需要不同的时间来呈现，我很乐意为每个项目添加一个微调器（创建一个微调器组件 + gif）或多个微调器以获得更好的 UI/UX。因为我的代码有条件，我很困惑如何以及在哪里放置我的微调器...... 欢迎任何帮助或建议！

下面是我的代码：

import React from 'react';

import SearchCategories from './SearchCategories';
import SearchCard from './SearchCard';
// import Spinner from '../layout/Spinner';
import { getFilteredByRating, getSortedByDate } from '../../utils/filters';

const SearchResult = ({
  gifs,
  searchMessage,
  ratingType,
  isDataSorting,
  onSortByDate,
  onSortByRating,
  onClearFilter,
}) => {
  const renderedGifs = gifs.slice();

  return (
    <React.Fragment>
      <h3 className="searchMessage text-center mb-4">{searchMessage}</h3>
      <SearchCategories
        onSortByDate={onSortByDate}
        onSortByRating={onSortByRating}
        onClearFilter={onClearFilter}
      />
      <br />

      {
        // if (gifs === undefined || !gifs.length) {
        //   return <Spinner />
        // } else {
        //   // the code below - the gif results
        // }
      }

      <div className="row justify-content-between">
        {(isDataSorting &&
          getSortedByDate(renderedGifs).map(gif => (
            <div className="col-md-3">
              <div className="m-2 card bg-transparent" key={gif.id}>
                <SearchCard gif={gif} />
              </div>
            </div>
          ))) ||
          (ratingType &&
            (getFilteredByRating(ratingType, renderedGifs).length !== 0 ? (
              getFilteredByRating(ratingType, renderedGifs).map(gif => (
                <div className="col-md-3">
                  <div className="m-2 card bg-transparent" key={gif.id}>
                    <SearchCard gif={gif} />
                  </div>
                </div>
              ))
            ) : (
              <p className="searchNotFound">
                Oops! None of the search results match this rating.
              </p>
            ))) ||
          gifs.map(gif => (
            // col-3  col-lg-3
            <div className="col-md-3">
              <div className="m-2 card bg-transparent" key={gif.id}>
                <SearchCard gif={gif} />
              </div>
            </div>
          ))}
      </div>

    </React.Fragment>
  );
};

export default SearchResult;

Answer 1

我根本没看你的逻辑，但语法看起来很有趣。看看这是否可行...如果不行，我会删除它！

    //...

    return (
      <React.Fragment>
        <h3 className="searchMessage text-center mb-4">{searchMessage}</h3>
        <SearchCategories
          onSortByDate={onSortByDate}
          onSortByRating={onSortByRating}
          onClearFilter={onClearFilter}
        />
        <br />

        {/* look here */}

        {gifs === undefined || !gifs.length ? (
          <Spinner />
        ) : (
          <div className="row justify-content-between">
            {(isDataSorting &&
              getSortedByDate(renderedGifs).map(gif => (
                <div className="col-md-3">
                  <div className="m-2 card bg-transparent" key={gif.id}>
                    <SearchCard gif={gif} />
                  </div>
                </div>
              ))) ||
              (ratingType &&
                (getFilteredByRating(ratingType, renderedGifs).length !== 0 ? (
                  getFilteredByRating(ratingType, renderedGifs).map(gif => (
                    <div className="col-md-3">
                      <div className="m-2 card bg-transparent" key={gif.id}>
                        <SearchCard gif={gif} />
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="searchNotFound">
                    Oops! None of the search results match this rating.
                  </p>
                ))) ||
              gifs.map(gif => (
                // col-3  col-lg-3
                <div className="col-md-3">
                  <div className="m-2 card bg-transparent" key={gif.id}>
                    <SearchCard gif={gif} />
                  </div>
                </div>
              ))}
          </div>
        )}
      </React.Fragment>
    );

    //...
    ```

在带有条件（用于过滤目的）的 React 组件中，将 Spinner 放在哪里？

In React component with conditionals (for filtering purpose), where to place Spinner?

spinner

jsx

reactjs