如何在 ReactJS 的类名字段中访问方法的 return 值？

Question

我在组件外有以下功能

  function getSortByClass(sortByOption){
    if (this.state.sortBy === sortByOption) {
      return 'active';
    }
    else {
      return '';
    }
  }

我有一个 return 正在执行以下功能的组件。

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

    return <li className={} key={sortByOptionValue} 
 onClick={ handleSortByChange.bind(this, sortByOptionValue)}> {sortByOption} </li>;
  });

我想知道如何在 <li> 标签类名的值中访问 getSortByClass 函数的 return 值。

这是完整的组件代码。

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

export class SearchBar extends React.Component{
    renderSortByOptions(){
      const that = this;

    function handleSortByChange(sortByOption){
      this.setState({ sortBy: sortByOption});
      }

      return Object.keys(sortByOptions).map(sortByOption => {
        let sortByOptionValue = sortByOptions[sortByOption];
        return <li className={} key={sortByOptionValue} onClick={ handleSortByChange.bind(this, 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;

Answer 1

我不知道您尝试做的事情是否可行，但这绝对不是一个好主意。只需将您正在使用的状态部分作为参数传递给函数即可。

  function getSortByClass(sortBy, sortByOption){
    if (sortBy === sortByOption) {
      return 'active';
    }
    else {
      return '';
    }
  }

然后将您的呼叫更改为

    return <li className={} key={sortByOptionValue} onClick={ handleSortByChange(this.state.sortBy, sortByOptionValue)}> {sortByOption} </li>;

如果函数不必超出范围，只需像@mersocarlin 所说的那样将它放在组件中。

使用 setState 编辑：

  getSortByClass(sortByOption){
    if (this.state.sortBy === sortByOption) {
      this.setState({styleClass: 'active' });
    }
    else {
      this.setState({styleClass: '' });
    }
  }

如何在 ReactJS 的类名字段中访问方法的 return 值？

How to access return value of a method in classname field in ReactJS?

function

return-value

classname

reactjs

react-props