javascript - 在不呈现的 ReactJS 文件中注入(inject) Javascript

Question

在 SearchBar 类的渲染中，我无法通过注入(inject)的 Javascript 获取无序列表以在浏览器中显示。该方法是否有错误，或者我还需要做些什么才能让注入(inject)的 Javascript 出现？

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 => {
    const sortByOptionValue = sortByOptions[sortByOption];
  });
}
  render() {
   return (
     <div className="SearchBar">
       <div className="SearchBar-sort-options">
         <ul>
           {this.renderSortByOptions()}
         </ul>
       </div>
       <div className="SearchBar-fields">
         <input placeholder="Search Businesses" onChange={this.handleTermChange} />
         <input placeholder="Where?" onChange={this.handleLocationChange} />
       </div>
       <div className="SearchBar-submit">
         <a>Let&#39;s Go</a>
       </div>
     </div>
   )
 }
}

export default SearchBar;

Answer 1

你必须像这样在 map 语句中返回:

 renderSortByOptions() {
   return Object.keys(sortByOptions).map(sortByOption => {
     return sortByOptions[sortByOption];
   });
 }

或者，您可以保留变量赋值并返回它:

renderSortByOptions() {
  return Object.keys(sortByOptions).map(sortByOption => {
    const sortByOptionValue = sortByOptions[sortByOption];
    return sortByOptionValue;
  });
}

请注意，这是普通的 Javascript 功能，无论框架如何都可以工作:)