Reactjs 如何在React中的classname字段中传递带参数的函数？

我的React项目中有以下组件。我要做的是向

元素添加一个className属性。将其设置为getSortByClass（）方法的返回值，并传入sortByOptionValue作为参数

import React from 'react';
import './SearchBar.css';

const sortByOptions = {
  'Best Match': 'best_match',
  'Highest Rated': 'rating',
  'Most Reviewed': 'review_count'
}
function getSortByClass(sortByOption){
  if (this.state.sortBy === sortByOption) {
    return 'active';
  }
  else {
    return '';
  }
}
function handleSortByChange(sortByOption){
  this.setState({
     sortBy: sortByOption
   });
}
export class SearchBar extends React.Component{
    renderSortByOptions(){
      return Object.keys(sortByOptions).map(sortByOption => {
        let sortByOptionValue = sortByOptions[sortByOption];
        return <li className={getSortByClass(sortByOptionValue)} key={sortByOptionValue}> {sortByOption} </li>;
      });
    }

    constructor(props) {
        super(props);
        this.state = {
          term: '',
          location: '',
          sortBy: 'best_match',
        };
    }
    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>Lets Go</a>
        </div>
        </div>
      );
    }
  }

  export default SearchBar;

从“React”导入React；
导入“/SearchBar.css”；
常数排序选项={
“最佳匹配”：“最佳匹配”，
“最高评级”：“评级”，
“审查次数最多”：“审查次数”
}
函数getSortByClass（sortByOption）{
if（this.state.sortBy===sortbyooption）{
返回“活动”；
}
否则{
返回“”；
}
}
功能handleSortByChange（排序选项）{
这是我的国家({
sortBy:sortBy选项
});
}
导出类搜索栏扩展React.Component{
renderSortByOptions（）{
返回Object.keys（sortByOptions）.map（sortByOptions=>{
设sortByOptionValue=sortByOptions[sortByOption]；
return
{sortByOption}
；
});
}
建造师（道具）{
超级（道具）；
此.state={
术语：“”，
位置：“”，
糟糕的是：“最佳匹配”，
};
}
render（）{
返回(

{this.renderSortByOptions（）}

走吧
);
}
}
导出默认搜索栏；

---

我收到错误：

TypeError:设置classname字段后无法读取未定义的属性“state”。
谢谢@Ajay Gaur。但是当我点击列表项时，我仍然没有激活类名。这是一个单独的问题。试着调试一下。看看你所等值的值是否相等谢谢@Ajay Gaur。但是当我点击列表项时，我仍然没有激活类名。这是一个单独的问题。试着调试一下。查看您要等值的值是否相等
....
function getSortByClass(sortBy, sortByOption){
  if (sortBy === sortByOption) {
    return 'active';
  }
  else {
    return '';
  }
}

export class SearchBar extends React.Component{
    handleSortByChange = (sortByOption) => this.setState({ sortBy: sortByOption});

    renderSortByOptions(){
      const that = this;

      return Object.keys(sortByOptions).map(sortByOption => {
        let sortByOptionValue = sortByOptions[sortByOption];
        return <li className={getSortByClass(that.state.sortBy, sortByOptionValue)} key={sortByOptionValue}> {sortByOption} </li>;
      });
    }
    ....

renderSortByOptions(){
          const that = this;

          return Object.keys(sortByOptions).map(sortByOption => {
            let sortByOptionValue = sortByOptions[sortByOption];
            return (
               <li className={that.state.sortBy === sortOption ? 'active' : ''} 
                   key={sortByOptionValue}
               > 
                   {sortByOption} 
               </li>
           );
        });
     }