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

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>;
});

Answer 2

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>

希望可以使事情变得更清晰：）

renderSortByOptions（）有什么作用？

2 个答案: