Что делает renderSortByOptions ()?

Question

Я изучаю React и нашел отличный проект, который я копирую и пытаюсь понять.До сих пор у меня не было проблем ни с чем, кроме renderSortByOptions().Что именно там происходит?Я вижу, что Object.key используется на sortByOptions -объекте для получения ключей (которые Best Match, Highest Rated and Most Reviewed или best_match и т. Д.?), Но я запутался, почему существует .map.

.map получает функцию обратного вызова, в которой объявлена ​​переменная (let), и в ней есть sortByOptions -объект с sortByOption в качестве индекса ?!Я действительно смущен по этому поводу.пожалуйста, объясните мне строки 12 - 18 (в основном renderSortByOptions()).

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react';
import './SearchBar.css';

const sortByOptions = {
  'Best Match': 'best_match',
  'Highest Rated': 'rating',
  'Most Reviewed': 'review_count'
};

class SearchBar extends React.Component {
  renderSortByOptions() {
    return Object.keys(sortByOptions).map(sortByOption => {
      let sortByOptionValue = sortByOptions[sortByOption];
      return <li key={sortByOptionValue}>{sortByOption}</li>;
    });
  }

  render() {
    return (
      <div className="SearchBar">
        <div className="SearchBar-sort-options">
          <ul>
            {this.renderSortByOptions()}
          </ul>
        </div>
        <div className="SearchBar-fields">
          <input placeholder="Search Businesses" />
          <input placeholder="Where?" />
        </div>
        <div className="SearchBar-submit">
          <a>Let's Go</a>
        </div>
      </div>
    );
  }
}

export default SearchBar;

Answer 1

Функция map используется для итерации массива, передавая элементы массива один за другим в функцию обратного вызова и возвращая значения, возвращенные в функции обратного вызова.Как вы можете видеть здесь, правило с React состоит в том, что каждый дочерний элемент, созданный в этой итерации, должен иметь уникальный key.

Теперь массив, который выполняет функция map (повторяется), является результатом (или возвращаемым значением) Object.keys, который возвращает массив ключей в назначенном объекте.В вашем случае возвращаемое значение Object.keys(sortByOptions) будет

[
  'Best Match',
  'Highest Rated',
  'Most Reviewed'
]

Так что итерация (зацикливание) этого массива - это то, что делает ваша функция renderSortByOptions.

Переменная, созданная внутри функции обратного вызова, по сути является значением ключа в объекте sortByOptions.Таким образом, для первого элемента в итерации значение sortByOptions[sortByOption] равно best_match, второе - rating, а третье - review_count;

В основном результат этой функции будет

<li key="best_match">Best Match</li>
<li key="rating">Highest Rated</li>
<li key="review_count">Most Reviewed</li>

конечно, они должны быть потомками <ul>, о котором заботятся внутри функции рендеринга

<ul>
    {this.renderSortByOptions()}
</ul>

Надеюсь, что это немного прояснит:)

Answer 2

Object.keys(obj) дает вам массив ключей в obj.

Так что в вашем случае sortByOptions - это объект с ключами Best Match, Highest Rated и Most Reviewed.

const sortByOptions = {
  'Best Match': 'best_match',
  'Highest Rated': 'rating',
  'Most Reviewed': 'review_count'
};

Object.keys(sortByOptions) вернет массив ['Best Match', 'Highest Rated', 'Most Reviewed'].

Так что этот

Object.keys(sortByOptions).map(...)

на самом деле

['Best Match', 'Highest Rated', 'Most Reviewed'].map(...)

.map зацикливаетсямассив, возвращающий новый массив.

Object.keys(sortByOptions).map(sortByOption => {
  // sortByOption will be each key in the object
  // sortByOptionValue will be the value assigned to that key
  let sortByOptionValue = sortByOptions[sortByOption];
    // you return an <li> element with key and value
    return <li key={sortByOptionValue}>{sortByOption}</li>;
});